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.
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.
Can you just use / in front of path? background-image: url('/img/hero2.jpg') no-repeat center;
Instead of using background in sass file use this in component like
suppose you want to give a background in a div in react then use
<div style={{"background":"url(pathOfYourImageThatIsStoredInPublicDirectory)"}}>
</div>
try change
background: url(img/hero2.jpg) no-repeat center;
to (use double slash in path)
background: url('//img/hero2.jpg') no-repeat center;
