React path to public folder in css background image

Issue

I am using Create-React-App and I want to add background image for my header section and I am doing this in that way:

background-image: url('~/Screenshot_11.png');

After this I’m getting this error:

./src/styles/main.scss
(./node_modules/css-loader/dist/cjs.js??ref–6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref–6-oneOf-5-3!./src/styles/main.scss)
Module not found: You attempted to import
../../../../../../../Screenshot_11.png which falls outside of the
project src/ directory. Relative imports outside of src/ are not
supported.

I’ve set up homepage in package.json

"homepage": "http://localhost:3000",

In my older projects that works but today I cannot import this correctly.

Solution

They have changed that but I don’t know why. Working path:

background-image: url('/Screenshot_11.png');

EDIT 2021

For people who think that it doesn’t work:

https://codesandbox.io/s/agitated-turing-gsnr3

Answered By – Freestyle09

Answer Checked By – Willingham (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.