React JS Image not loaded from public folder in css

Below is the image as you can see I want to load the image from the public folder but It does not work

Hey there,

nice to meet you! :wave:

When you open the page in the browser, does the image load in the network tab?
When you go to the DOM inspector, can you see the correct link to the image?

1 Like

I have this error

You are providing an incorrect path to the image. It should have double dots before /images

If you use /images in your app.css, you search for a folder images in the current location of app.css.

But to find the images folder, you first have to go one level up.
Then you have to go into public to find the images folder.

root
--> src
---->app.css
--> public
----> images
------> logo

here is the updated code and see the error below in the picture

Have you tried '../../public/images/logo192.png'?

Yes but it does not work actually public is root directory and we don’t need to go any level up

If src and images are at the same level inside public then I suppose '../images/logo192.png' should do.

It would be better if you react your own react app in create an image folder inside the public and after put an image inside the images folder and access that image in CSS file and CSS file should be placed in src older.

I googled it for you (the exact error).

Without ejecting you can’t reach outside the src folder.
So move the images into a folder in the src folder.

I can access images from the public folder in react components but cannot access in CSS I have tried. and You are right I have put my image in the src folder and I had accessed that image in CSS.

Did you find a solution to this I am having the same issue

I think I have had this issue before I think because React is running off of a server the src of your images needs to look something like 127.0.0.0/images/logo192.png

Hi @EddyDomingo !

Welcome to the forum!

The OP has not been active on the forum since this post was created so I would create a new topic and ask your question there.

Thanks!