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

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的三种图片引入方式