'React path to public folder in css background image

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.

htmlcssjsonreactjs


Solution 1:[1]

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

Solution 2:[2]

you can import that image as 

import Background from './Screenshot_11.png'

and use

background-image: `url(${Background})`

Solution 3:[3]

This still does not work for me with images in the public folder.

UPDATED 19 March 2021

Regarding using of <ROOT/public/images> in .css files.

It appears to be a breaking change (will be considered as a bug?) in create-react-app (react-scripts) package v4.x.
And more precisely in package 'css-loader' v4.x.
3.x branch works OK with that.

Here is the corresponding issue on the github repo:
https://github.com/facebook/create-react-app/issues/9870
(and there are few more actually).

No fixes (yet). (will be?..)
But a few workarounds mentioned there. Which one to use... it depends on your project, I suppose.

Some of workarounds:

  • downgrade to react-scripts 3.4.x

  • don't use url in CSS files :) you still can use in .JSX (inline styles). Or put in .html. They are obviously not processed by css-loader.

  • reconfigure webpack to add url:false to css-loader options (either eject CRA or use this: https://github.com/gsoft-inc/craco or this: https://github.com/timarney/react-app-rewired (you can find sample configurations at the github issue page)

  • use this new feature of css-loader https://github.com/webpack-contrib/css-loader/pull/1264 (released in 5.1.0, current last version is 5.1.3; to use that version you can add the following to the package.json: "resolutions": { "css-loader": "5.1.3" } (at root level) )

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
Solution 2 Sabesan
Solution 3

Related Questions