Reaktionspfad zum öffentlichen Ordner im CSS-Hintergrundbild
Lesezeit: 3 Minuten
Freestyle09
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.
~ zeigt normalerweise auf den Standardspeicherort auf Ihrem Betriebssystem (glaube ich). Hast du das versucht: background-image: url('./Screenshot_11.png');
– John Brown
19. Juli 2019 um 11:09 Uhr
Funktioniert auch nicht
– Freestyle09
19. Juli 2019 um 11:22 Uhr
Freestyle09
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:
Dies funktioniert bei mir immer noch nicht mit Bildern im öffentlichen Ordner.
– Jakob Hubert
15. Dezember 2020 um 15:36 Uhr
Sie müssen in Ihren Netzwerk-Tab in den Entwicklertools nachsehen und sehen, welchen Pfad Sie anfordern, vielleicht hilft Ihnen das
– Freestyle09
16. Dezember 2020 um 8:02 Uhr
Für diejenigen wie mich, die Schwierigkeiten haben, ihr CSS im SRC-Ordner so zu gestalten, dass sie mit ihren Bildern im PUBLIC-Ordner funktionieren, lesen Sie hier die Erklärung hinter der Empfehlung, die Bilder in den SRC-Ordner zu verschieben github.com/facebook/create-react-app/issues/… Wie im Link erklärt, “Sie sollten keine öffentlichen Bilder benötigen; der Build-Prozess kopiert zur Kompilierzeit Bilder von src/ nach build/ (und aktualisiert die Pfade entsprechend). “
– Joseph
6. März 2021 um 19:56 Uhr
@JamesHubert bitte senden Sie uns ein Beispiel, wenn dies nicht funktioniert
– Freestyle09
24. März 2021 um 7:40 Uhr
Sie können dieses Bild als importieren
import Background from './Screenshot_11.png'
und verwenden
background-image: `url(${Background})`
Hat mir mit React-Scripts v4 und Styled-Components geholfen. Danke schön.
– El Anonimo
19. April 2021 um 10:43 Uhr
zpetukhov
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.
(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.
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) )
Kurze Antwort – Verschieben Sie das Bild in den Ordner src/images, anstatt es öffentlich zu sein.
– Ben in Kalifornien
24. Oktober um 17:06 Uhr
14370700cookie-checkReaktionspfad zum öffentlichen Ordner im CSS-Hintergrundbildyes
~zeigt normalerweise auf den Standardspeicherort auf Ihrem Betriebssystem (glaube ich). Hast du das versucht:background-image: url('./Screenshot_11.png');– John Brown
19. Juli 2019 um 11:09 Uhr
Funktioniert auch nicht
– Freestyle09
19. Juli 2019 um 11:22 Uhr