Image path in css for react js project

Question

Base folder structure is node_modules, public, src.

css file in public folder public/styles.css images are in src/images/icon.png

what should be the correct image path for this image for any class in css file which kept in public folder in localhost eg: .icon { background: url(../src/images/icon.png) no-repeat left top;

images can see directly from http://localhost:3000/exampleimage.png if I have images in public folder.

Please help

Vetrivel Pandiyarajan · Accepted Answer · 2018-08-03 07:57:10Z

2

This file path points to a file in the images folder located at the root of the current web

.icon { background: url(/src/images/icon.png) no-repeat left top;}

This file path points to a file in the images folder located in the current folder.

.icon { background: url(src/images/icon.png) no-repeat left top;}

This file path points to a file in the images folder located in the folder one level above the current folder.

.icon { background: url(../src/images/icon.png) no-repeat left top;}

answered Aug 3, 2018 at 7:57

Vetrivel Pandiyarajan

6541 gold badge7 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Vetrivel Pandiyarajan Over a year ago

do you have any live link..?

PRANAV Over a year ago

Sorry. I don;t have any public link

PRANAV Over a year ago

when I copied image to public folder its working as per this path. public/styles.css public/icon.png .icon { background: url(icon.png) no-repeat left top;}

Vetrivel Pandiyarajan Over a year ago

some times image name with different test case dose not support. so please check the name.

Dat Tran · Accepted Answer · 2018-08-03 08:52:31Z

1

Your server only serve files within public folder. So that, you have to put files into public folder. In that case, you can use either ./imagefilename.jpg or /imagefilename.jpg to get the file.

answered Aug 3, 2018 at 8:52

Dat Tran

1,5961 gold badge12 silver badges16 bronze badges

Collectives™ on Stack Overflow

Image path in css for react js project

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related