Images not showing in production build

[sabari245]

Problem

Recently, I've created a web app with react as my college assignment. The web app worked fine during the development. But in the production build I was able to see only a blank screen. I opened the console and found this

I searched about this problem on Stack Overflow but I could not find a proper solution.

I've opened the build folder to look if I can figure out the problem. then I realized the file paths have a / (slash) in front of it

so I've change the code to

now all the css and javascript files load properly. but the images are not loading so I've add the following code in a script tag

now all the images that will be displayed in the initial screen gets loaded properly, but the problem persists with the remaining images

I've tried adding MutationObserver but that didn't work either

So, could you please tell me a quick way to solve this issue ?
Thank you for kindly reading my report

[sabari245]

My problem was solved just by adding
"homepage": "./"
in the package.json file
Thank you for your support

[xiaohaoo]

我也遇到遇到同样的问题，还有种办法是修改css extract插件的publicPath属性，但是我不知道这个属性在哪配置？

[irwansyafani]

I've faced same issue, the error was ERR_NOT_FOUND and after checked how React was importing my static image with file:///file-name.png then I just remove / from my code

before:

// file:///file-name.png
<img  src={`/${item.imageUrl}`} />

to:

// file://file-name.png
<img  src={item.imageUrl} />

Hope this would help as well. 🚀

[xiaohaoo]

修改webpack的publicPath为auto就可以

[RashidBik]

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="" />