À propos de la façon dont vue implémente le chargement dynamique de l'image src

Maintenant, je vais partager avec vous une solution pour charger dynamiquement l'image src basée sur vue. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Je n'ai pas blogué depuis longtemps. Je ne sais pas avec quoi j'ai été occupé récemment. Quoi qu'il en soit, je me sens assez occupé dans le groupe, j'ai vu des amis qui sont nouveaux sur Vue demander. à propos du chargement dynamique des images et elles obtiennent toujours 404. situation, cet article expliquera brièvement pourquoi cela se produit et quelles sont les solutions.

Tout d'abord, expliquons la différence entre les actifs et les fichiers statiques de vue-cli, car cela vous sera utile pour comprendre les solutions suivantes

actifs : Pendant le processus de compilation du projet, il sera traité et analysé en dépendances de module par webpack. Seules les formes de chemin relatif sont prises en charge, telles que < .png), "./logo.png" est un chemin de ressource relatif, qui sera analysé par webpack en tant que dépendance de module

statique : Les fichiers de ce répertoire ne seront pas traités par webpack , ce qui signifie simplement que des tiers sont stockés. L'emplacement du fichier ne sera pas analysé par webpack. Il sera copié directement dans le répertoire final de l'empaquetage (la valeur par défaut est dist/static). Ces fichiers doivent être référencés à l'aide de chemins absolus, qui sont déterminés via les liens build.assetsPublic et build.assertsSubDirectory dans le fichier config.js. Tous les fichiers placés dans static/ doivent être référencés sous forme de chemins absolus : /static[filename]

Selon les caractéristiques de webpack, en général, les fichiers statiques ne changeront pas. Le troisième fichier, affirme Put. fichiers qui peuvent changer

Voici le problème, utilisez js pour charger dynamiquement des actifs ou des images de ce fichier et un code d'état 404 apparaît

Exemple de code

<li v-for="(item,index) in images" :key="index">
<img :src="item.src"></li>
//js部分
data(){
 return {
 images:[{src:&#39;./1.png&#39;},{./2.png}]
 }
}

Lorsque je l'ai exécuté, j'ai constaté que l'image n'était pas affichée et que le code d'erreur était 404.

Raison : Dans le webpack, les images sont utilisées comme modules car elles sont chargé dynamiquement. Le chargeur d'URL ne pourra pas analyser l'adresse de l'image, et le chemin ne sera pas traité après npm run dev ou npm run build [Le chemin analysé par webpack sera analysé comme /static/img/[filename. .png, et l'adresse complète est localhost : 8080/static/img/[filename].png】

Solution :

①Utilisez des images comme modules Chargez-les, comme des images :[{src:require('./1.png')},{src:require('./2.png')}] donc ce webpack peut l'analyser.

②Mettez les images dans le répertoire statique, mais le chemin absolu doit être écrit tel que images :[{src:”/static/1.png”},{src:”/static/2.png” }] De cette façon, l'image sera également affichée. Bien entendu, vous pouvez également raccourcir la longueur d'écriture du chemin en le définissant dans webpack.base.config.js.

Bien sûr, vous avez dit que ce serait gênant d'écrire comme ça quand il y a trop d'images locales. Eh bien, en fait, nous simplifions l'opération comme ça.

Première étape : Créer un nouveau dossier json en statique

Partie 2 : Remplissez le fichier json, comme indiqué sur l'image

Partie 3 : Introduisez json dans le fichier de réponse vue , analysez simplement la référence

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

Articles associés :

Problèmes inter-domaines de ProxyTable dans le projet vue-cli

Serveur de requêtes de builds express

Utilisez la fonction de découpage personnalisée de js pour supprimer les espaces aux deux extrémités

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!