Wie man mit dem vue:src-Dateipfadfehlerproblem umgeht

Dieses Mal zeige ich Ihnen, wie Sie mit dem Problem mit dem Dateipfad vue:src umgehen können. Was sind die Vorsichtsmaßnahmen für den Umgang mit dem Problem mit dem Dateipfad vue:src? Schauen Sie mal rein.

Erklären wir zunächst den Unterschied zwischen den beiden Assets-Dateien von vue-cli und statisch, da dies für das Verständnis der nachfolgenden Lösungen hilfreich sein wird

Assets: Während des Projektkompilierungsprozesses wird es 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://www.php%20.cn/wiki/%20892.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 ein relativer Ressourcenpfad, der analysiert wird von Webpack als Modulabhängigkeit
statisch: Dateien in diesem Verzeichnis werden nicht von Webpack verarbeitet. Bedeutet einfach, dass der Ort, an dem Dateien von Drittanbietern gespeichert sind, nicht von Webpack analysiert wird. Es wird direkt in das endgültige Verpackungsverzeichnis kopiert (Standard ist dist/static). Auf diese Dateien muss über absolute Pfade verwiesen werden, die über die Links und build.assetsPublic in der Datei config.js ermittelt werden. Auf jede in static/ abgelegte Datei muss in Form eines absoluten Pfads verwiesen werden: /static[filename] build.assertsSubDirectory 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

analysiert , und die vollständige Adresse lautet /static/img/[filename].png] 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<p style="text-align: left;">('./1.png')},{src:require ('./2.png')}] code>damit das Webpack es analysieren kann. <code>images:[{src:<a href="http://www.php.cn/wiki/136.html" target="_blank">require</a>(‘./1.png')},{src:require(‘./2.png')}]

　②Legen Sie das Bild in das statische Verzeichnis, es muss jedoch als absoluter Pfad wie

geschrieben werden, damit das Bild angezeigt wird. Natürlich können Sie die Schreiblänge des Pfads auch verkürzen Definieren Sie es in images:[{src:”/static/1.png”},{src:”/static/2.png”}]. 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:

Ausführliche Erklärung zur Verwendung des $http-Dienstes in AngularJS

Ausführliche Erklärung von Vue addRoutes Schritte zum Implementieren des dynamischen Berechtigungsrouting-Menüs

Das obige ist der detaillierte Inhalt vonWie man mit dem vue:src-Dateipfadfehlerproblem umgeht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!