Implementieren Sie die Methode zum Laden lokaler statischer Bilder über v-for in vue (ausführliches Tutorial).

Im Folgenden werde ich einen Artikel darüber teilen, wie v-for lokale statische Bilder in Vue lädt. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

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

rrree

Das habe ich für Sie zusammengestellt hilfreich für Sie in der Zukunft.

Verwandte Artikel:

Vue-Projekt deaktiviert Eslint-Verifizierung

JS-Methode zum Durchlaufen unregelmäßiger mehrdimensionaler Arrays

JS-Implementierungsbeispiel für das Hinzufügen einer Ereignisfunktion zu dynamisch hinzugefügten Elementen

Das obige ist der detaillierte Inhalt vonImplementieren Sie die Methode zum Laden lokaler statischer Bilder über v-for in vue (ausführliches Tutorial).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!