I'm currently facing a challenge with adding an image as a background, especially since the image is located in a public folder structure like this: -public -images -image.png -src -assets -components -index.tsx -index.module.css (I want to use the image.png in this file)
If I move the image into src/assets, I can easily reference it as
background: url(./assets/image.png)index.tsx. However, my goal is to utilize the image in module.css from the public folder in order 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;
}
When attempting to use the second URL option, I encounter 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)