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

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)
javascriptcssreactjstypescriptreact-tsx


Solution 1:[1]

you can use file inside public folder directly

background: url(folderInPublic/image.png)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Abhinav

Related Questions