Summary of src attributes of img tag in vue (problem solving)

Use of src attribute of img tag in vue

When we first come into contact with the vue framework, many friends may encounter the problem that the path does not take effect when using the img tag when setting the dynamic src attribute. Let’s not talk much, let’s start the process!!!

Img tag reference resource pictures

Generally, resources that do not need to be processed by webpack are placed in static, and those that need to be processed are placed in assets

1. Images that do not need to be processed by webpack are placed in static

Images that do not require webpack processing, directly use absolute paths to call the image, such as "/static/xx/"
chestnut
html code

<img v-bind:src="imgUrl"/>

js code

data(){
	return{
		imgUrl:"/static/"
	}
}

It was successfully read. After executing npm run build, check the dist file and found that it was placed in the root directory as it was.

2. Place the pictures that need to be processed by webpack

Can you use import or require to import. import is es6 syntax, and require is commonJS form.
Chestnut 1

<img class="logo-img" src="@/assets/images/" alt="logo" />

Chestnut 2

<img :src="require('@/assets/images/')" class="sidebar-logo">

Chestnut 3

//HTML1
<img class="logo-img" :src="imgUrl" alt="logo" />
//JS
data(){
	return{
		imgUrl:require('./assets/')
	}	
}

You can also directly refer to the network path

//HTML1
<img class="logo-img" :src="imgUrl" alt="logo" />
//JS
data(){
	return{
		imgUrl: '/'
	}	
}

Let’s summarize it here first, and then add it to new methods later. I hope it will be helpful to you.

This is the article about the summary of the src attributes of the img tag in vue. This is the end. For more related contents of the vue src attributes, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!