So lösen Sie das Problem ungültiger statischer Ressourcenbilder nach der Vue-Verpackung

Im Folgenden werde ich einen Artikel mit Ihnen teilen, der das Problem ungültiger statischer Ressourcenbilder nach der Vue-Verpackung löst. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist.

1. Problembeschreibung

Wenn wir in der Projektentwicklung die Datei über npm run build verpacken und auf dem Server ablegen, wird sie angezeigt Normalerweise liegt ein Bildfehler vor und die Konsole meldet, dass ein bestimmtes Bild nicht gefunden wurde (404-Fehler). Bei diesen Bildern kann es sich um mit src eingeführte Bilder oder um in CSS definierte Hintergrundbilder handeln. Ob das Bild angezeigt werden kann, hängt direkt vom Speicherort Ihrer statischen Ressourcendatei und dem importierten Pfad ab. Das Folgende ist die Dateispeicher- und Pfadschreibmethode eines meiner Projekte!

2. Eine der Lösungen

Der statische Speicherort statischer Ressourcen wird im src-Verzeichnis abgelegt

Sie fragen sich vielleicht, warum es im src-Verzeichnis abgelegt wird? Kann es nicht im selben Verzeichnis wie src abgelegt werden? Nun, zuerst habe ich es im selben Verzeichnis wie src abgelegt, aber als ich ein Hintergrundbild in eine bestimmte CSS-Datei eingefügt habe, wurde das Bild nach dem Packen ungültig. Ich habe es so eingeführt

Die Praxis hat gezeigt, dass diese Schreibweise falsch ist. Dies führt beim Packen zu vielen Fehlern (z. B. CSS-Loader-Fehlern) und das Projekt kann nicht einmal ausgeführt werden.

Also habe ich folgende Schreibmethode verwendet:

Diese Schreibmethode ist ebenfalls nicht erlaubt, weil Ihre statische Ressourcendatei static befindet sich nicht im src-Verzeichnis, und in Vue ist das src-Verzeichnis relativ zum Stammverzeichnis, das das src-Verzeichnis ist. Wenn Sie also die obige Schreibmethode verwenden möchten, müssen Sie static im src-Verzeichnis ablegen. Wie in Abbildung 1 und Abbildung 2 oben gezeigt

Hinweis: static/images/user.png kann nicht als /static/images/user.png geschrieben werden, da das Bild sonst weiterhin ungültig ist .

Oben geht es um den Dateispeicherort und die Einführung von Bildern in CSS. Wenn das Bild über das img-Tag eingeführt wird, ist es relativ einfach, die absolute Adresse direkt zu schreiben. und die statische Ressource statischer Ordner Der Speicherort kann sich in src befinden oder auf derselben Ebene wie src platziert werden. Um die obige Situation zu vermeiden, legen Sie ihn einfach in src ab!

img importiert Bilder:

Das oben Gesagte ist natürlich eine Möglichkeit, das Problem des Bildfehlers zu lösen verwenden static Das Ressourcenverzeichnis wird im selben Verzeichnis wie src abgelegt Es gibt auch Lösungen, wie zum Beispiel das Importieren von Bildern (ich habe das nicht geübt), Sie können es selbst versuchen!

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Implementierung lokaler statischer Bildpfade bei der Verwendung von Vue (ausführliches Tutorial)

Führende Schriftartsymbole gemäß Webpack-Konfigurationslösung Fehler anzeigen (ausführliches Tutorial)

Verwenden des BootStrap User Experience Frameworks in React (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem ungültiger statischer Ressourcenbilder nach der Vue-Verpackung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!