some images are not loading in react app even they exists

Question

I'm working on a ReactJs app. Everything works fine in development. When I make a build using npm run build and test it, some images on a page are shown, and some images are simply not found. I can see that the user avatar image is shown, but all other images are not shown. I inspected the code in a browser and checked the src of the image. The path is good, and the image is also available in ./static/media/card-1.7a6bc100.jpg but not showing on the page. Then I inspected the code of the user avatar image, src looks similar, and that image is working fine. I'm not sure why it's behaving like this. Below is what my source code looks like.

import marc from "assets/img/faces/marc.jpg";

And then my img tag looks like:

<img src={marc} className={imgStyle} alt="..." />

It always spits out ... dots, which means the image is not loaded, but the image is available there, and the path is also perfect when I inspect this image in a browser. Can anyone help me understand why it is doing this on production? It's been hours while working on this, but I haven't found any solution.

Answer 1

If you are using create-react-app, assets will also need to be served inside src. You should also reference the image using relative path, not absolute path. For example:

image is under src/assets/img/faces

your code is under src/some-folder/your-code.js

// your-code.js
import marc from "../assets/img/faces/marc.jpg";

Answer 2

I had the same problem but solved it by importing images instead of using exact path on src

<img src="src/assets/Waving.gif" alt="" />

this way

import Waving from "../assets/Waving.gif"
<img src={Waving}  alt="" />