How to access react public folder in SCSS to import images

Question

There is folder named 'img' inside public folder. If I write this, background: url(img/hero2.jpg) no-repeat center; Then it throws this error. Module not found: Can't resolve './img/hero2.jpg' in 'D:\Programming\react\redux-blog\src'

If I write this background: url(../public/img/hero1.jpg) no-repeat center; Then it says this. Module not found: You attempted to import ../public/img/hero1.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

Answer 1

Can you just use / in front of path? background-image: url('/img/hero2.jpg') no-repeat center;

Answer 2

You need to create an src/img folder and place images there. On the URL then you can use just background-image: url('/img/hero2.jpg'). Webpack will find which images are being used and copy them to a static assets folder. Unused images will not be published, also (depending on your configuration) it can add a unique name to handle properly different versions of the image and bypass proxy caching.

Answer 3

Instead of using background in sass file use this in component like

Answer 4

suppose you want to give a background in a div in react then use

<div style={{"background":"url(pathOfYourImageThatIsStoredInPublicDirectory)"}}>
</div>