Wie vue:src Dateipfadfehler behandelt

Dieses Mal zeige ich Ihnen, wie Sie Dateien mit vue:srcPfadfehlern verarbeiten und welche Vorsichtsmaßnahmen es gibt, damit vue:src Dateipfadfehler behandelt. Werfen wir einen Blick darauf Werfen Sie einen Blick darauf.

Assets: Während des Projektkompilierungsprozesses werden sie vom Webpack verarbeitet und in Modulabhängigkeiten analysiert. Es werden nur relative Pfadformen unterstützt, z. B. < img src=”./logo.png”> und <code><a href="http%20://www%20.php.cn/wiki/892.html" target="_blank">background<code><a href="http://www.php.cn/wiki/892.html" target="_blank">background</a>:url(./logo.png):url(./logo.png), "./logo.png" ist eine relative Ressource Pfad, der Webpack als Modulabhängigkeit aufgelöst hat
statisch: Dateien in diesem Verzeichnis werden nicht von Webpack verarbeitet. Einfach ausgedrückt, wird der Ort, an dem Dateien von Drittanbietern gespeichert sind, nicht von Webpack analysiert. Es wird direkt in das endgültige Verpackungsverzeichnis kopiert (Standard ist dist/static). Auf diese Dateien muss mit absoluten Pfaden verwiesen werden, die über die Links build.assetsPublic und build.assertsSubDirectory in der Datei config.js ermittelt werden. Auf jede in static/ abgelegte Datei muss in Form eines absoluten Pfads verwiesen werden: /static[filename]
Gemäß den Eigenschaften von Webpack werden statische Dateien im Allgemeinen nicht geändert. Dateien in der dritten Datei können nicht bestätigt werden . Geänderte Dateien

Bei der Verwendung von js zum dynamischen Laden von Assets oder Bildern dieser Datei wird ein 404 Statuscode angezeigt

Code Beispiele

<li v-for="(item,index) in images" :key="index">
<img :src="item.src"></li>
//js部分
data(){
 return {
 images:[{src:'./1.png'},{./2.png}]
 }
}

Als ich es ausführte, stellte ich fest, dass das Bild nicht angezeigt wurde und der Fehlercode 404 war.

Grund: Im Webpack werden Bilder als Module verwendet Da sie dynamisch geladen werden, kann der URL-Loader die Bildadresse nicht analysieren und der Pfad wird nach dem Ausführen von npm run dev oder npm run build nicht verarbeitet. [Der vom Webpack analysierte Pfad wird als /static/img/[filename].png analysiert , und die vollständige Adresse lautet localhost:8080/static/img/[filename].png]

Lösung:

　①Laden Sie das Bild als Modul, z. B. images: [{src:<a href="http://%20www.php.cn/wiki/136.html" target="_blank">require<code>images:[{src:<a href="http://www.php.cn/wiki/136.html" target="_blank">require</a>(‘./1.png')},{src:require(‘./2.png')}]('./1.png')},{src:require ('./2.png')}] code>damit das Webpack es analysieren kann.

　②Legen Sie das Bild in das statische Verzeichnis, es muss jedoch als absoluter Pfad wie images:[{src:”/static/1.png”},{src:”/static/2.png”}] geschrieben werden, damit das Bild angezeigt wird. Natürlich können Sie die Schreiblänge des Pfads auch verkürzen Definieren Sie es in webpack.base.config.js.

Natürlich haben Sie gesagt, dass es mühsam wäre, so zu schreiben, wenn zu viele lokale Bilder vorhanden sind. Tatsächlich vereinfachen wir den Vorgang auf diese Weise.

Schritt 1: Erstellen Sie einen neuen JSON-Ordner im statischen Format

Teil 2: Füllen Sie die JSON-Datei aus, wie in der Abbildung gezeigt

Teil 3: JSON in die Antwort-Vue-Datei einführen und Referenz analysieren

Ich glaube, Sie haben die Methode nach dem Lesen des Falles gemeistert In diesem Artikel finden Sie weitere spannende Inhalte. Beachten Sie bitte andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie den http-Server in AngularJS

Detaillierte Erklärung zur Verwendung von Keep-Alive in vue

Das obige ist der detaillierte Inhalt vonWie vue:src Dateipfadfehler behandelt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!