溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue的三種圖片引入方式代碼實例

發(fā)布時間：2020-09-21 18:06:50 來源：腳本之家 閱讀：176 作者：周逸航 欄目：web開發(fā)

這篇文章主要介紹了vue的三種圖片引入方式代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

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

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

在script中設置變量：

//方法1：直接將圖片引入為模塊
require imgUrl from "../assets/test.png"

//方法2：把imgUrl放在數(shù)據(jù)中
data() {
  return {
    imgUrl:require("../assets/test.png")
   }
}
補充方法2：(在data數(shù)組中保存數(shù)據(jù)的情況）
data() {
   test: [
     {  imgUrl: require('../assets/test.png'),  id: '1'  },
   ],
   ...
}

//方法3：在生命周期函數(shù)中設置
data() {
  return {
    imgUrl:" "
   }
}

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手