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="//m.sbmmt.com/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

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

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

Solution :

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

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!