Comment charger des images statiques locales avec v-for

Cette fois, je vais vous montrer comment v-for charge des images statiques locales, quelles sont les précautions pour que v-for charge des images statiques locales, ce qui suit est un cas pratique , jetons un coup d'oeil Jetez un œil.

La map du projet vue-cli est placée dans le répertoire des actifs (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 des chemins d'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 = '../../assets/crop'+j+'.png';
}

Il s'avère que bien que le chemin src de img soit chargé dans le navigateur, l'image ne s'affiche pas. Baidu a découvert plus tard que le package webpack l'avait analysée en chaîne au lieu du chemin réel <.>

Changez pour

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

Bien sûr, si vous placez les images statiques dans le répertoire statique au début, un tel problème peut ne pas se produire, et il y a eu un manque de considération dès le début.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication graphique détaillée de Vue.directive()

Exemple de données Douban d'exploration de Node.js

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!