Que faire si le chemin de la ressource image vue.js est incorrect

La solution au chemin incorrect de la ressource image vue.js : 1. Utilisez v-bind pour lier l'attribut src de l'image ; 2. Utilisez import pour introduire le chemin de l'image ; le dossier statique externe à l'intérieur, puis définissez imgUrl dans data.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.0, ordinateur DELL G3 Cette méthode convient à toutes les marques d'ordinateurs.

[Recommandations d'articles connexes : vue.js]

Lorsque nous référençons des images dans le projet Vue.js, il existe les situations suivantes concernant le chemin de l'image :

Utilisez-en un :

Définissez le chemin de l'image dans les données :

 /*错误写法*/    imgUrl:'../assets/logo.png'

Dans le modèle :

/*错误写法*/   <img src="{{imgUrl}}">

Ce qui précède est une manière d'écrire incorrecte, nous devrions utiliser v - bind lie l'attribut src de l'image :

<img :src="imgUrl">
//或者 
<img src="../assets/logo.png">

Cette méthode fait référence au chemin selon la syntaxe HTML normale et peut être empaquetée par webpack lorsqu'elle est placée dans le modèle.

Utilisez 2 :

Lorsque nous devons écrire le chemin de l'image dans le code js, si nous l'écrivons dans les données, webpack le traitera uniquement comme une chaîne et ne trouvera pas l'adresse de l'image . ,

écriture incorrecte

imgUrl:'../assets/logo.png'

A ce moment, nous pouvons utiliser l'importation pour introduire le chemin de l'image :

<img :src="imgUrl" />
import avatar from &#39;@/assets/logo.png&#39;

Définir dans les données : avatar : avatar

Utilisez-en trois :

Nous pouvons également mettre l'image dans le dossier statique externe, puis la définir dans data :

imgUrl ： '../../static/logo.png'
<img :src="imgUrl" />

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!