Images not loading when relative path is used in React

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

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

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

The second one is to give an image’s path to <img>‘s src attribute, but it’s always relative to the 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="" />