Comment gérer le problème d'erreur de chemin de fichier vue: src

Cette fois, je vais vous montrer comment résoudre le problème d'erreur de chemin de fichier vue:src. Quelles sont les précautions pour résoudre le problème d'erreur de chemin de fichier vue:src. Voici des cas réels, voyons. jetez un oeil.

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

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 < img src=”./logo.png”> et <code><a href="http://www.php.%20.cn/wiki/%20892.html" target="_blank">background<code><a href="http://www.php.cn/wiki/892.html" target="_blank">background</a>:url(./logo.png):url(./logo.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 Signifie simplement que l'endroit où les fichiers tiers sont stockés 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 et build.assetsPublic dans le fichier config.js. Tout fichier placé dans static/ doit être référencé sous la forme d'un chemin absolu : /static[filename] build.assertsSubDirectory Selon les caractéristiques de webpack, en général, les fichiers statiques ne changeront pas. Les fichiers du troisième fichier peuvent être affirmés. . Fichiers modifiés

Un problème survient lors de l'utilisation de js pour charger dynamiquement des actifs ou des images de ce fichier, un code d'état 404

apparaît

Code. exemples

<li v-for="(item,index) in images" :key="index">
<img :src="item.src"></li>
//js部分
data(){
 return {
 images:[{src:'./1.png'},{./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 en tant que modules car ils sont chargés dynamiquement. , donc url-loader 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

, et l'adresse complète est /static/img/[filename].png] localhost:8080/static/img/[filename].png

Solution :

　①Charger l'image en tant que module, tel que images :[{src:<a href="http:%20//www.php.cn/wiki/136.html" target="_blank">require<p style="text-align: left;">('./1.png')},{src :require('./2.png')}] </p></a>De cette façon, Webpack peut l'analyser. images:[{src:<a href="http://www.php.cn/wiki/136.html" target="_blank">require</a>(‘./1.png')},{src:require(‘./2.png')}]　②Mettez l'image dans le répertoire statique, mais elle doit être écrite comme un chemin absolu tel que

pour que l'image soit affichée. Bien sûr, vous pouvez également raccourcir la longueur d'écriture du chemin en. le définissant dans images:[{src:”/static/1.png”},{src:”/static/2.png”}]. 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.

Étape 1 : Créez un nouveau dossier json en statique

Partie 2 : Remplissez le fichier json, comme indiqué sur la figure

Partie 3 : Introduire json dans le fichier de réponse vue et analyser la référence

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article , pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Explication détaillée de la façon d'utiliser le service $http dans AngularJS

Vue addRoutes explication détaillée du étapes pour mettre en œuvre le menu de routage dynamique des autorisations

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!