【Vue】图片引入方式

方法一：在 data 中定义

• 在data()里面定义好图片路径，需要在链接外面加上require

data(){
	return {
		imgUrl:require("../assets/test.png"),
	}
}

• 在template模板里面使用，需要使用v-bind (简写 : )绑定图片的src属性

<template>
	 <img :src="imgUrl">
</template>

方法二：使用 import 导入

• 引入：

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

• 使用：

<template>
   <img :src="imgUrl">
</template>

方法三：在created 中设置

• 定义：

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

created() {
    let urlTemp = "assets/test.png";
    this.imgUrl = require("@/" + urlTemp)
}

• 使用：

<template>
   <img :src="imgUrl">
</template>