Implémenter la méthode de chargement d'images statiques locales via v-for dans vue (tutoriel détaillé)

Maintenant, je vais partager avec vous un article sur la façon dont v-for charge les images statiques locales dans Vue. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Les images locales du projet vue-cli sont placées dans le répertoire assets (car l'image vue initiale de vue-cli s'y trouve, donc toutes les images y sont placées

Après cela, v-for a rencontré un problème lors du chargement dynamique du chemin de l'image

Code source :

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

Il s'est avéré que bien que le chemin src de img ait été chargé dans le navigateur, l'image n'était pas affichée. Baidu a découvert plus tard que le package webpack avait été analysé en chaîne, pas. le vrai chemin

Changez-le en

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

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère. cela sera utile à tout le monde à l’avenir.

Articles connexes :

Le projet Vue désactive la vérification eslint

Méthode JS de traversée de tableaux multidimensionnels irréguliers

Exemple d'implémentation JS d'ajout d'une fonction d'événement à des éléments ajoutés dynamiquement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!