Si nous utilisons directement v-bind pour importer, il ne peut pas être importé normalement.
<image :src="item.src" alt=""/>C'est parce que la page est affichée sous la forme html+css+js et que vue doit être empaquetée dans html+css+js pour devenir ce que nous pouvons voir.
Au cours du processus d'empaquetage, la variable item.src a été supprimée et transformée en /image/icon.svg. Elle a simplement traité l'adresse comme une ressource statique. Cependant, l'adresse locale de 127.0.0.1 lorsque nous l'avons exécutée n'était pas 127.0. Les ressources .0.1 /image/icon.svg ne peuvent pas être utilisées
via la méthode require
<image :src="require(item.src)"/>Cette méthode reuire charge dynamiquement l'adresse
Cependant, à ce moment-là, le navigateur a signalé une erreur indiquant qu'il ne pouvait pas trouver ce module Impossible de trouver '1-icon.svg'.
Étant donné que require peut importer des ressources et des modules de modèle, votre require ne peut pas identifier s'il s'agit d'un package ou d'une ressource.
Solution finale:
Il suffit d'ajouter une certaine adresse devant pour faire reconnaître qu'il s'agit d'une ressource plutôt que d'un package.
<img :src="require('./images/'+item.icon)" alt=""/>