vue動態加載靜態資源

項目背景：項目的使用場景是面向信息安全相關部門，環境頗有可能沒有公網，局域網並不穩定，因此沒法使用七牛等CDN保存圖片資源。從而採用引入本地資源的方式

一般一張本地靜態圖片在vue中的寫法是這樣

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

可是，img標籤若是在src路徑中使用變量，會被編譯爲字符串，致使編譯後的路徑就是咱們寫上去的字符串形式，好比你在data中定義了一個變量src，而後在img標籤中引用

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

你會發現這個時候圖片並無被加載出來，瀏覽器中這張圖片的地址直接顯示'@/assets/icon/demo.png'，也就是沒有通過編譯的步驟，直接將咱們的輸入看成字符串顯示

在實際開發中，不免會須要動態生成圖片路徑的場景，那麼如何正確顯示圖片呢？

1. 在當前頁面全局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"/> 

圖片能夠正確顯示，但須要圖片名稱和你引入的圖片手動作好對應。做爲一個程序員，固然不會使用這麼low的操做了，因此就有了下文

2. 使用require

require能夠在代碼中使用，因此咱們能夠在獲取數據的同時，爲數對象增長一個src的屬性

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

這就須要咱們規範本地圖片的命名了，確保能最有效地獲取到正確的圖片路徑
使用require的時候也須要注意一點：require內容不能使用變量，以下寫法會直接致使編譯報錯

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

3.將本地資源放到static目錄下引用

getData() {
  this.data.forEach(ele => { ele.src = 'static/icon/' + ele.name + '.png' }) }