v-zum Laden der lokalen statischen Bildmethode in Vue

Im Folgenden erfahren Sie, wie v-for lokale statische Bilder in Vue lädt. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

Die lokalen Bilder im vue-cli-Projekt werden im Assets-Verzeichnis abgelegt (da sich das ursprüngliche Vue-Image von vue-cli darin befindet, werden also alle Bilder darin abgelegt); >

Danach ist v-for beim dynamischen Laden des Bildpfads auf ein Problem gestoßen

Quellcode:

<ul>
<li v-for="(item,index) in teamInfo" @click="trastFun(item)">
<p><img v-bind:src="item.imageurl"/></p>
<p>{{item.name}}</p>
<p>{{item.position}}</p>
<p class="icon-vs">VS</p>
</li>
</ul>
for(var i = 0;i<self.teamInfo.length;i++){
var j= i+1;
self.teamInfo[i].imageurl = &#39;../../assets/crop&#39;+j+&#39;.png&#39;;
}

Es stellte sich heraus, dass, obwohl der Quellpfad von img im Browser geladen wurde, das Bild nicht angezeigt wurde. Später stellte Baidu fest, dass das Webpack-Paket in eine Zeichenfolge analysiert wurde, nicht in die Realität Pfad.

wurde geändert in

for(var i = 0;i<self.teamInfo.length;i++){
var j= i+1;
self.teamInfo[i].imageurl = require(&#39;../../assets/crop&#39;+j+&#39;.png&#39;);
}

Natürlich, wenn Sie die statischen Bilder in das statische Verzeichnis unter legen Am Anfang dürfte ein solches Problem nicht auftreten, und es fehlte von Anfang an an Rücksichtnahme.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Einführung in die Verwendung von Vue zum dynamischen Generieren von Formularen

vue implementiert die Funktion zum Zuschneiden von Bildern und Hochladen sie auf den Server Einführung

Das obige ist der detaillierte Inhalt vonv-zum Laden der lokalen statischen Bildmethode in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!