項目背景：項目的使用場景是面向信息安全相關部門，環境很有可能沒有公網，局域網並不穩定，所以無法使用七牛等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' }) }