What to do if the vue.js image resource path is incorrect

The solution to the incorrect path of vue.js image resource: 1. Use v-bind to bind the src attribute of the image; 2. Use import to introduce the image path; 3. Place the image in the outer static folder inside, and then define imgUrl in data.

The operating environment of this tutorial: windows7 system, vue2.0 version, DELL G3 computer. This method is suitable for all brands of computers.

[Related article recommendations: vue.js]

When we reference images in the Vue.js project, there are the following situations regarding the image path:

Use one:

Define the image path in the data:

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

In the template:

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

The above is an incorrect way of writing, we should use v- bind binds the src attribute of the image:

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

This method refers to the path according to normal HTML syntax, and can be packaged by webpack when placed in the template.

Use 2:

When we need to write the image path in the js code, if we write it in the data, webpack will only treat it as a string and cannot find the image address. ,

Wrong writing method

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

At this time we can use import to introduce the image path:

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

Definition in data: avatar: avatar

Use three:

We can also put the image in the outer static folder, and then define it in data:

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

The above is the detailed content of What to do if the vue.js image resource path is incorrect. For more information, please follow other related articles on the PHP Chinese website!