CODEWITHSUNDEEP
javascriptreactjsimage
Asad ullah
Asad ullah

Reputation: 716

some images are not loading in react app even they exists

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.

Upvotes: 3

Views: 4935

Answers (5)

rashid Bik
rashid Bik

Reputation: 9

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

Upvotes: 1

Jordy
Jordy

Reputation: 1958

I think the problem is only about missing the first slash / at the first of the import value. The compiler 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

Upvotes: 0

deta utama
deta utama

Reputation: 783

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

Upvotes: 0

D. H Luong
D. H Luong

Reputation: 1356

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

Upvotes: 2

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22895

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

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

Upvotes: 0

Related Questions