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); >

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.

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:

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!