How to load an image using relative path in ReactJS?

Question

I want to add two images 1)java.png 2)neural.png When I try to type in src="java.png" and src="neural.png" it does not load the image. I want to add these images in my content component.

content.js:

class Content extends Component {

  render() {
    return (
      <div> 

                     <div className="col l4">
                            <img src="java.png" alt="Java" height="25" width="25"></img>
                            <h6 className="cardtitle1">NEW LAUNCH</h6>
                            <p className="cardcontent1">JAVA</p><p></p>
                            <p className="cardcontent1">Foundations</p>
                      </div>

                      <div className="col l4">
                            <img src="neural.png" alt="Neural Network" height="25" width="25"></img>
                            <h6 className="cardtitle2">NEW LAUNCH</h6>
                            <p className="cardcontent2">Neural Newtwork</p><p></p>
                            <p className="cardcontent2">Foundations</p>
                      </div>
 </div>
    );
  }
}

export default Content;

The file path looks like this:

In console it shows image could not load:

Have you imported the image? like this: import java from './java.png'; And then: <img src={java} alt="Java" /> — salman.zare
– salman.zare, Commented Mar 12, 2018 at 4:56
No, please refer to the following reference: github.com/facebook/create-react-app/blob/master/packages/… — salman.zare
– salman.zare, Commented Mar 12, 2018 at 4:57

Liam · Accepted Answer · 2018-03-12 04:44:40Z

2

Actually, there are many ways to handle images in ReactJS.

import Java from './java.png';

then use it like

  <img src={Java} alt="Java" height="25" width="25" />

Also check of this link will help you Unable to load images from local library in React.js

answered Mar 12, 2018 at 4:44

Liam

6,8037 gold badges28 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

stone rock Over a year ago

Can you please help me out here: stackoverflow.com/questions/49229529/…

Hamed · Accepted Answer · 2021-01-10 21:05:59Z

1

I put all my images in one 'images' folder under the public folder, then anywhere in my project, I can use the following path in img element:

It works fine with my projects initiate with create-react-app especially when I have too many images, then I don't have to import one by one.

answered Jan 10, 2021 at 21:05

Hamed

9016 silver badges4 bronze badges

Comments

Shiva Sai · Accepted Answer · 2018-03-12 04:44:55Z

0

try this

 <img src="./java.png" alt="Java" height="25" width="25"></img>

answered Mar 12, 2018 at 4:44

Shiva Sai

4631 gold badge4 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to load an image using relative path in ReactJS?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related