Images not loading when relative path is used in React

Question

I was importing the images previously like this in React:

import person from '../images/image1.png'

And then using them like this:

<img src={person} alt="" />

Now I want to specify the path in the src itself due to some reason, like this:

<img src="../images/image1.png" alt="" />

But it's not working even though it should.

Answer 1

There are two ways to add images in your JSX with Create React App. First one is to use import like you did, to import an image that is somewhere in src folder, like so:

import person from '../images/image1.png'

<img src={person} alt="" />

Second one is to give directly an image's path to <img> 's src attribute, but it's always relative to public folder, in a way that the path should starts with / , and / means public folder.

See Adding Images, Fonts, and Files and Using the Public Folder on Create React App's documentation.

For your second attempt to work, you could put images folder inside public folder, and get your images like so:

<img src="/images/image1.png" alt="" />

If your React app will be in a sub folder when deployed, for the second way to work, you should add in your package.json this "homepage":"www.example.com/folder" , and use process.env.PUBLIC_URL as below.

 <img src={process.env.PUBLIC_URL + "/images/image1.png"} alt="" />