javascript - some images are not loading in react app even they exists - Stack Overflow

admin管理员组

文章数量:1406937

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.

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.

• javascript
• reactjs
• image

Share Improve this question Follow edited Sep 4, 2023 at 22:42 AmerllicA 32.7k1717 gold badges144144 silver badges167167 bronze badges asked Jan 17, 2020 at 19:32 Asad ullahAsad ullah 71622 gold badges1010 silver badges2828 bronze badges 6

• 2 did you find any solution for it . I am also facing similar problem. The path in the build server seems different. It is automatically ing like sitename/ponent/static/media/image rather than sitename/static/.. – Rahul Sharma Commented Dec 14, 2020 at 7:38
• its seems like baseurl and context path issue – PK86 Commented Sep 4, 2023 at 1:21
• @user:4227525 have you got some resolution? – PK86 Commented Sep 4, 2023 at 1:28
• 1 Can you provide a simple reproduction of your issue? – AmerllicA Commented Sep 4, 2023 at 22:51
• Sounds an awful lot like a cache issue (works fine in dev, not in production) but obviously only if it's only newer or recently changed images that aren't displaying as expected. – TCooper Commented Sep 9, 2023 at 20:29

 |  Show 1 more ment

5 Answers 5

Sorted by: Reset to default 2

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";

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

Put your images in public/images/ folder and use like this

<img src="/images/logo.png" className={imgStyle} alt="Logo" />

Place your static assets within the ./public folder. For example, if you have an image called image-123.png, move it to the ./public folder.

You can then access the image in your HTML code like this:

<img src="/image-123.png" alt="logo123" />

Feel free to organize your assets further by creating sub-folders within the ./public directory. For instance, you can create a folder like ./public/assets/ and access the image as follows:

<img src="/assets/image-123.png" alt="logo123" />

I think the problem is only about missing the first slash / at the first of the import value. The piler didn't find the right path of the image because the path is invalid. Instead of using this

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

then try this

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

Full code: https://playcode.io/1589865

Full demo: https://1589865.playcode.io

本文标签： javascriptsome images are not loading in react app even they existsStack Overflow