Informationen dazu, wie Vue das dynamische Laden von Bildquellen implementiert

Im Folgenden werde ich Ihnen eine Lösung zum dynamischen Laden von Bild-SRC basierend auf Vue vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

Ich habe schon lange nicht mehr gebloggt, womit ich mich in letzter Zeit beschäftigt habe. Ich habe in der Gruppe gesehen, wie viele Leute gefragt haben Bei Fragen zum dynamischen Laden von Bildern erhalten Sie immer 404. In diesem Artikel wird kurz erläutert, warum es auftritt und welche Lösungen es gibt.

Erklären wir zunächst den Unterschied zwischen den Assets und den statischen Dateien von vue-cli, denn dies wird Ihnen helfen, die nachfolgenden Lösungen zu verstehen

Assets: Während des Projektkompilierungsprozesses wird es vom Webpack verarbeitet und in Modulabhängigkeiten analysiert, z. B. < img src="./logo.png"> .png), „./logo.png“ ist ein relativer Ressourcenpfad, der von Webpack als Modulabhängigkeit analysiert wird

statisch: Dateien in diesem Verzeichnis werden nicht von Webpack verarbeitet Dies bedeutet lediglich, dass der Speicherort der Datei von Dritten nicht vom Webpack analysiert wird. 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“ bestimmt werden. Alle in static/ abgelegten Dateien müssen in Form eines absoluten Pfads referenziert werden: /static[Dateiname]

Gemäß den Eigenschaften von Webpack ändern sich statische Dateien im Allgemeinen nicht. Die dritte Datei behauptet Put Dateien, die sich ändern können

Hier kommt das Problem: Verwenden Sie js, um Assets oder Bilder dieser Datei dynamisch zu laden, und ein 404-Statuscode wird angezeigt

Codebeispiele

<li v-for="(item,index) in images" :key="index">
<img :src="item.src"></li>
//js部分
data(){
 return {
 images:[{src:&#39;./1.png&#39;},{./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, weil sie geladen werden dynamisch, die URL- Der Loader kann die Bildadresse nicht analysieren, und dann wird der Pfad nach npm run dev oder npm run build nicht verarbeitet [Der vom Webpack analysierte Pfad wird als /static/img/[Dateiname analysiert .png, und die vollständige Adresse lautet localhost:8080/ static/img/[filename].png】

Lösung:

①Laden Sie das Bild als Modul, z. B. images:[{src:require('./1.png')},{src:require('./2.png')}] damit Webpack kann es analysieren.

②Legen Sie die Bilder in das statische Verzeichnis, aber der absolute Pfad muss wie folgt geschrieben werden: images:[{src:“/static/1.png“},{src:“/static/2.png“ }] Auf diese Weise wird das Bild auch angezeigt. Natürlich können Sie die Schreiblänge des Pfads auch verkürzen, indem Sie ihn in webpack.base.config.js definieren.

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

Schritt eins: Erstellen Sie einen neuen JSON-Ordner im statischen

Teil 2: Füllen Sie die JSON-Datei aus, wie im Bild gezeigt

Teil 3: Fügen Sie JSON in die Antwort-Vue-Datei ein , analysieren Sie einfach die Referenz

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

ProxyTable-domänenübergreifende Probleme im Vue-Cli-Projekt

Express erstellt Abfrageserver

Verwenden Sie die benutzerdefinierte Trimmfunktion von js, um Leerzeichen an beiden Enden zu entfernen

Das obige ist der detaillierte Inhalt vonInformationen dazu, wie Vue das dynamische Laden von Bildquellen implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!