Adding path to an image in CSS module from public folder in react

Question

I am trying to add an image as background, however the location of image is in a pulic folder. -public -images -image.png -src -assets -components -index.tsx -index.module.css (I want to use the image.png in this file)

If I put the image in src/assets, I can use it as background: url(./assets/image.png). I can also access it in index.tsx. However, I am trying to access the image in module.css from the public folder as I need to change the image on hover.

.up {
  /*path in source works*/
  background: url(../../../../assets/keyboardKeys/keyboardArrows.png) 150px 51px;   

  /*path outside source. inside public. I want to use this */
  background: url(Assets/keyboardKeys/keyboardArrows.png) 150px 51px; 
}

Using the second url results in the following error:

Failed to compile.

./src/app/index.module.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./src/app/index.module.css)

You have not stated what problem you are having, also there is no code. Can you provide details on the error/issue? And give a sample of relevant code? — Phil
– Phil, Commented Feb 24, 2022 at 10:07
All the files in the public folder should be accessible ... publicly. As in - statically served. You can double check if the file is returned on the url that you expect by going to it directly. This would be something like localhost:<yourport>/Assets/keyboardKeys/keyboardArrows.png. If that is not returning your image, there's your problem. — Phil
– Phil, Commented Feb 24, 2022 at 11:09
Also, probably add a / at the start of paths as well as quoting it. background: url('/Assets/keyboardKeys/keyboardArrows.png') — Phil
– Phil, Commented Feb 24, 2022 at 11:11
@Phil The thing is I don't want to add it statically because if the port is busy, it would result in an error. — Sakaggi
– Sakaggi, Commented Feb 24, 2022 at 11:14

Abhinav · Accepted Answer · 2022-02-24 10:09:11Z

0

you can use file inside public folder directly

background: url(folderInPublic/image.png)

answered Feb 24, 2022 at 10:09

Abhinav

4186 silver badges13 bronze badges

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

1 Comment

Sakaggi Over a year ago

I have tried it but it doesn't work. Attached the code now in my question

Collectives™ on Stack Overflow

Adding path to an image in CSS module from public folder in react

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related