0

Recently I've been studying React. I'm facing some issues in my code and don't know the reason.

I'm trying to load a local image in my webpage with the following code:

import React from 'react'
import './style.css'
import Card from '../UI/Card'

const BlogPost = (props) => {
    return (
        <div className="blogPostContainer">
            <Card>
                <div className="blogHeader">
                    <span className="blogCategory">Featured</span>
                    <h1 className="postTitle">Beautiful is Beautiful</h1>
                    <span className="postedBy">Post on 31 of July, by Victor Arduin</span>
                </div>
                <div className="postImageContainer">
                    <img src={require('../../blogPostImages/img1.jpg')} alt="Post Image"/>
                </div>  
            </Card>
            
        </div>
    )
}

export default BlogPost

However, when I access the webpage there is no image. When I check the elements of the page I find the following code:

enter image description here

Somehow, it looks like the image is not being loaded to the page. I have checked many questions in the forum, but none of them seems to explain this problem.

I also tried to reinstall few modules as webpack and other dependencies, but the problem still persists. The tree of files of my project are as following:

enter image description here

Thank you for the support!

noob_nerd
  • 531
  • 1
  • 6
  • 21
Arduin
  • 233
  • 4
  • 15
  • Can you make a test? Take of the className='postImageContainer' and check if image appears, can be something related with your css – Andre Moraes Jan 10 '21 at 17:37
  • what's the react-scripts version you are using? If it's v4 then yeah there is a bug in it, try downgrading the react-scripts to v3.4.4 You can check the react-scripts version in package.json – Ahmad Nawaz Khan Jan 10 '21 at 17:49
  • [Difference between `require(x)` and `import x`](https://stackoverflow.com/questions/46677752/the-difference-between-requirex-and-import-x#:~:text=The%20major%20difference%20between%20require,The%20future%20version%20of%20Node.) – Ergis Jan 10 '21 at 17:50
  • Indeed. I am using v4. Apparently using the suggestion of importing the image to the script worked. Thank you!!! – Arduin Jan 10 '21 at 18:05

2 Answers2

2

Try importing the image as

import postImage from "../../blogPostImages/img1.jpg";

Modified code


import React from 'react'
import './style.css'
import Card from '../UI/Card'
import postImage from "../../blogPostImages/img1.jpg"

const BlogPost = (props) => {
    return (
        <div className="blogPostContainer">
            <Card>
                <div className="blogHeader">
                    <span className="blogCategory">Featured</span>
                    <h1 className="postTitle">Beautiful is Beautiful</h1>
                    <span className="postedBy">Post on 31 of July, by Victor Arduin</span>
                </div>
                <div className="postImageContainer">
                    <img src={postImage} alt="Post Image"/>
                </div>  
            </Card>
            
        </div>
    )
}

export default BlogPost
Hitman
  • 81
  • 3
0
import Img1 from '../../blogPostImages/img1.jpg';

<img src={Img1}/>
elirand5
  • 231
  • 1
  • 7