v-pour charger la méthode d'image statique locale dans vue

Ce qui suit partagera 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;;
}

Remplacez par

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

Introduction à l'utilisation de Vue pour générer dynamiquement des formulaires

vue implémente la fonction de recadrage des images et de téléchargement les au serveur Introduction

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!