0

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)
Sakaggi
  • 93
  • 9
  • 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 Feb 24 '22 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:/Assets/keyboardKeys/keyboardArrows.png`. If that is not returning your image, there's your problem. – Phil Feb 24 '22 at 11:09
  • Also, probably add a `/` at the start of paths as well as quoting it. `background: url('/Assets/keyboardKeys/keyboardArrows.png')` – Phil Feb 24 '22 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 Feb 24 '22 at 11:14
  • https://stackoverflow.com/questions/48841775/reference-file-in-public-folder-from-css-in-create-react-app – Malik Omer Javed Feb 24 '22 at 11:15
  • Well yes, if you don't want to host your asset statically, do not add it to the public folder. – Phil Feb 24 '22 at 11:16

1 Answers1

0

you can use file inside public folder directly

background: url(folderInPublic/image.png)
Abhinav
  • 388
  • 4
  • 12