So laden Sie lokale statische Bilder mit v-for

Dieses Mal zeige ich Ihnen, wie v-for lokale statische Bilder lädt, welche Vorsichtsmaßnahmen es gibt, damit v-for lokale statische Bilder lädt. Das Folgende ist ein praktischer Fall , lass uns einen Blick darauf werfen. Schau mal.

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

Danach ist v-for auf ein Problem beim dynamischen Laden von Bildpfaden 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 = '../../assets/crop'+j+'.png';
}

Es stellt sich heraus, dass das Bild nicht angezeigt wird, obwohl der Quellpfad von img im Browser geladen wird. Später stellte Baidu fest, dass das Webpack-Paket es in string statt in den tatsächlichen Pfad

Wechseln zu

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

Wenn Sie die statischen Bilder am Anfang in das statische Verzeichnis legen, kann ein solches Problem natürlich nicht auftreten, und es gab ein mangelnde Rücksichtnahme von Anfang an.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Detaillierte grafische Erklärung von Vue.directive()

Node.js-Crawling-Beispiel für Douban-Daten

Das obige ist der detaillierte Inhalt vonSo laden Sie lokale statische Bilder mit v-for. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!