vue中引入圖片的幾種方式

vue的三種圖片引入方式

• 首先給圖片地址綁定變量：

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

• 在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)
}
</script>