How to refer to the path in the image

When we reference images in our project, there are several situations regarding the image path:

Use one

We define the image path in data

imgUrl:'../assets/'

Then, inside the template template

/*Error writing*/
<img src="{{imgUrl}}">

This is the wrong way to write it. We should use v-bind to bind the srcs attribute of the image

<img :src="imgUrl">

or

<img src="../assets/">

This method is to refer to the normal HTML syntax and place it in a template and can be packaged by webpack.

Use two

When we need to write the image path in the js code, if we write it in data

/*Error writing*/
imgUrl:'../assets/'

At this time, webpack will only process it as a string and cannot find the image address. At this time, we can use import to introduce the image path:

<img :src="avatar" />
import avatar from '@/assets/'

Definition in data

avatar: avatar

Situation Three

We can also place the picture in the outer static folder and then define it in data:

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

Summarize

The above is the way to quote the image in the editor to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!