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

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

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

Bien sûr, si vous placez les images statiques dans le fichier statique répertoire au début, un tel problème peut ne pas se produire. C'est un manque de considération.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

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!