vue require图片_vue的三种图片引入方式

5f6109210e837c078b485dc70da8c208.png

vue的三种图片引入方式:

首先给图片地址绑定变量:

在script中设置变量:

//方法1:直接将图片引入为模块

require imgUrl from "../assets/test.png"

//方法2:把imgUrl放在数据中

data() {

return {

imgUrl:require("../assets/test.png")

}

}

补充方法2:(在data数组中保存数据的情况)

data() {

    test: [

        {   imgUrl: require('../assets/test.png'),   id: '1'   },

     ],

     ...

}

//方法3:在生命周期函数中设置

data() {

return {

imgUrl:" "

}

}

created() {

let urlTemp = "assets/test.png";

this.imgUrl = require("@/" + urlTemp)

}

标注:本文在源自本人博客园文章vue的三种图片引入方式