Heim > Web-Frontend > js-Tutorial > Hauptteil

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

亚连
Freigeben: 2018-06-01 15:28:47
Original
3279 Leute haben es durchsucht

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;;
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!