項目背景：項目的使用場景是面向信息安全相關(guān)部門，環(huán)境很有可能沒有公網(wǎng)，局域網(wǎng)并不穩(wěn)定，所以無法使用七牛等CDN保存圖片資源。從而采用引入本地資源的方式

通常一張本地靜態(tài)圖片在vue中的寫法是這樣

<img src="@/assets/icon/demo.png">

但是，img標(biāo)簽如果在src路徑中使用變量，會被編譯為字符串，導(dǎo)致編譯后的路徑就是我們寫上去的字符串形式，比如你在data中定義了一個變量src，然后在img標(biāo)簽中引用

//data中定義變量src
data() {
  return {
    src: 'demo' 
  }
}
//模版中的標(biāo)簽
<img src="@/assets/icon/" + src + ".png">

你會發(fā)現(xiàn)這個時候圖片并沒有被加載出來，瀏覽器中這張圖片的地址直接顯示'@/assets/icon/demo.png'，也就是沒有經(jīng)過編譯的步驟，直接將我們的輸入當(dāng)作字符串顯示

在實際開發(fā)中，難免會需要動態(tài)生成圖片路徑的場景，那么如何正確顯示圖片呢？

1. 在當(dāng)前頁面全局import圖片地址

//使用import引入
import pic1 from '@/assets/icon/demo1.png'
import pic2 from '@/assets/icon/demo2.png'
//在data中定義圖片變量
data() {
  return {
    pic: {[
      name: 'demo1',
      src: pic1,
    ], [
      name: 'demo2',
      src: pic2,
    ]}
  }
}
//在HTML中使用
<img v-for="item in pic" :src="item.src" :alt="item.name"/>

圖片可以正確顯示，但需要圖片名稱和你引入的圖片手動做好對應(yīng)。作為一個程序員，當(dāng)然不會使用這么low的操作了，所以就有了下文

2. 使用require

require可以在代碼中使用，所以我們可以在獲取數(shù)據(jù)的同時，為數(shù)對象增加一個src的屬性

getData() {
  this.data.forEach(ele => {
    ele.src = require('@/assets/icon/' + ele.name + '.png');
  })
}

這就需要我們規(guī)范本地圖片的命名了，確保能最有效地獲取到正確的圖片路徑
使用require的時候也需要注意一點：require內(nèi)容不能使用變量，如下寫法會直接導(dǎo)致編譯報錯

let src = '@/assets/icon/demo.png';
require(src)
//報錯“. is not a module”

amazing