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="//m.sbmmt.com/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

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}]
 }
}

analysiert , und die vollständige Adresse lautet /static/img/[filename].png] localhost:8080/static/img/[filename].png

Lösung:

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

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!