Que dois-je faire si Vue signale une erreur indiquant qu'il ne trouve pas l'image ?

La solution pour l'erreur de vue signalant que l'image est introuvable : 1. Modifiez le fichier de configuration et remplacez le chemin absolu par un chemin relatif ; 2. Chargez l'image en tant que module et placez l'image dans le répertoire statique ; Introduisez imageUrls dans la réponse. Dans le fichier vue, analysez simplement la référence.

L'environnement d'exploitation de ce tutoriel : système windows7, vue3, ordinateur Dell G3.

Que dois-je faire si vue signale une erreur et ne trouve pas l'image ?

Le problème et la solution des images qui ne se chargent pas dans vue

Lors de l'utilisation de vue pour développer des projets, un problème souvent rencontré est le suivant : les images ne peuvent pas être chargées. Vous trouverez ci-dessous les situations et solutions que j'ai résumées pour plusieurs situations dans lesquelles les images ne peuvent pas être chargées.

1. Une fois le packaging du projet terminé, ouvrez l'intégralité du formulaire vierge

1. Problème de chemin

Cause

Dans le projet vue+webpack, les chemins de référence css et js après le packaging du projet sont des chemins absolus, et le seront. ajouté après le déploiement du projet L'utilisation de static comme répertoire racine provoque une erreur dans le chemin de référence du fichier.

Solution

Changez le chemin absolu en chemin relatif en modifiant le fichier de configuration.

Les opérations spécifiques sont les suivantes :

1.vue-cli avant la version 3.0

Configurez le chemin exporté par le module bulid dans index.js sous config. Étant donné que le contenu de index.html est introduit via des balises de script et que votre chemin est erroné, il sera définitivement vide une fois ouvert. Jetons d'abord un coup d'œil au chemin par défaut.

module.exports = {
 build: {
 env: require('./prod.env'),
 index: path.resolve(__dirname, '../dist/index.html'),
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 productionSourceMap: true,

assetsPublicPath par défaut est «/» qui est le répertoire racine. Nos index.html et static sont dans le même répertoire. Alors changez-le en './ '

2.vue-cli Après la version 3.0

configurez le fichier vue.config.js

module.exports = {
  // baseUrl:'./', // vue-cli3.3以下版本使用
  publicPath:'./' // vue-cli3.3+新版本使用

2. Une fois le mode historique de vue-router empaqueté, l'interface est créée. est vide

src Le mode par défaut dans la configuration du routage router/index.js est le hachage Si vous le changez en mode historique, il sera vide lorsque vous l'ouvrirez. Alors changez-le en hachage ou supprimez directement la configuration du mode et faites-en la valeur par défaut.

Si vous devez utiliser le mode historique, vous devez ajouter une ressource candidate sur le serveur qui couvre toutes les situations : si l'URL ne peut correspondre à aucune ressource statique, vous devez renvoyer un index.html, qui est la page dont dépend votre application. .

// mode: 'history' 
// 默认hash

2. L'image dans le répertoire des actifs ne peut pas être chargée

La différence entre les actifs et les fichiers statiques de vue-cli

• assets : sera bloquée par webpack pendant le projet processus de compilation Le traitement est résolu en dépendances de module et ne prend en charge que la forme de chemins relatifs, tels que < img src='./logo.png'> .png' est un chemin de ressource relatif qui sera résolu par webpack en tant que dépendance de module. assets：在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，如< img src=’./logo.png‘>和background:url(./logo.png),‘./logo.png‘是相对资源路径，将有webpack解析为模块依赖。
• static
static : les fichiers de ce répertoire ne seront pas traités par webpack. Cela 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 build.assetsPublic et build.assertsSubDirectory dans le fichier config.js. Tout fichier placé dans static/ doit être référencé comme un chemin absolu : /static[filename].

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

La raison

Dans le webpack, les images seront utilisées comme modules, car elles sont chargées 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, l'adresse complète est localhost:8080/static/img/[filename].png】

Solution

1 Chargez l'image en tant que module

Par exemple, images:[{src:require('. / 1.png')},{src:require('./2.png')}], afin que Webpack puisse l'analyser.

2. Placez les images dans le répertoire statique

mais doivent être écrites sous la forme d'un chemin absolu 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.

Comment simplifier le chargement d'images locales

1. Créez un nouveau dossier imageUrls en statique

2 Remplissez le fichier imageUrls

{
  'imageUrls': [
    {
      'image1': '/static/image/image1.png'
    },
    {
      'image2': '/static/image/image2.png'
    }
  ]
}

3. , analysez simplement la référence

import img from '../../../static/imageUrls/imageUrls.json'
export default {
  data() {
    return {
      imageGroups: img.imageUrls
    }
  }
}

Apprentissage recommandé : "tutoriel vidéo vue.js

"🎜

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!