Reaktionspfad zum öffentlichen Ordner im CSS-Hintergrundbild

Ich verwende Create-React-App und möchte ein Hintergrundbild für meinen Header-Bereich hinzufügen, und ich mache das auf diese Weise:

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

Danach bekomme ich diesen Fehler:

./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) Modul nicht gefunden: Sie haben versucht, ../…/ zu importieren. ./../../../../Screenshot_11.png, die außerhalb des src/-Verzeichnisses des Projekts liegt. Relative Importe außerhalb von src/ werden nicht unterstützt.

Ich habe eine Homepage in package.json eingerichtet

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

In meinen älteren Projekten funktioniert das, aber heute kann ich das nicht richtig importieren.

Sie haben das geändert, aber ich weiß nicht warum. Arbeitsweg:

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

BEARBEITUNG 2021

Für Leute, die denken, dass es nicht funktioniert:

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

Sie können dieses Bild als importieren

import Background from './Screenshot_11.png'

und verwenden

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

Dies funktioniert bei mir immer noch nicht mit Bildern im öffentlichen Ordner.

AKTUALISIERT am 19. März 2021

Zur Verwendung von in .css-Dateien.

Es scheint sich um eine bahnbrechende Änderung (wird sie als Fehler betrachtet?) im Paket v4.x von create-react-app (react-scripts) zu handeln.
Genauer gesagt im Paket ‘css-loader’ v4.x.
3.x-Zweig funktioniert damit einwandfrei.

Hier ist das entsprechende Problem im Github-Repo:
https://github.com/facebook/create-react-app/issues/9870

(und es gibt tatsächlich noch ein paar mehr).

(Noch) keine Korrekturen. (wird sein?..)
Aber ein paar Problemumgehungen dort erwähnt. Welche man verwenden soll … es hängt von Ihrem Projekt ab, nehme ich an.

Einige Problemumgehungen:

• Downgrade auf React-Scripts 3.4.x

• Verwenden Sie keine URL in CSS-Dateien 🙂 Sie können sie immer noch in .JSX (Inline-Stile) verwenden. Oder fügen Sie .html ein. Sie werden offensichtlich nicht vom CSS-Loader verarbeitet.

• Konfigurieren Sie das Webpack neu, um url:false zu den CSS-Loader-Optionen hinzuzufügen (entweder CRA auswerfen oder Folgendes verwenden: https://github.com/gsoft-inc/craco oder dieses: https://github.com/timarney/react-app-rewired
  (Beispielkonfigurationen finden Sie auf der Github-Problemseite)

• Verwenden Sie diese neue Funktion des CSS-Loader https://github.com/webpack-contrib/css-loader/pull/1264
  (veröffentlicht in 5.1.0, die aktuell letzte Version ist 5.1.3; um diese Version zu verwenden, können Sie Folgendes zur package.json hinzufügen: “resolutions”: { “css-loader”: “5.1.3” } (at root Niveau) )