The image reference path in Vue. js. The image reference path in vue. js.

The image reference path in Vue. js. The image reference path in vue. js.

When we reference images in the Vue. js project, there are several possible image paths:

Use 1

We define the image path in data.

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

Then, in the template

/* Incorrect syntax */

This is an incorrect syntax. We should use v-bind to bind the srcs attribute of the image.

Or

This method references the path according to the normal HTML syntax and can be packaged by webpack in the template.

Use 2

When we need to write the image path in the js Code, if we want to write

/* Incorrect syntax */imgUrl: '../assets/logo.png'

In this case, webpack only processes the image as a string and cannot find the image address. In this case, we can use import to introduce the image path:

import avatar from '@/assets/logo.png'

Define in data

avatar: avatar

Scenario 3

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

imgUrl ： '../../static/logo.png'

Summary

The above is a small series of Vue. the image reference path in js is helpful to you. If you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!