vue動態綁定img標籤的src地址

問題代碼：

<li v-for="(item,index) in images" :key="index">

<img :src="item.src"></li>

若是使用vue-lazyloader加載那就是：

<img v-lazy="item.src"></li>

以上代碼會出現控制檯會報錯404的的錯誤，緣由以下：

摘自：https://blog.csdn.net/mr_yanyan/article/details/78783091

在webpack中會將圖片圖片來當作模塊來用，由於是動態加載的，因此url-loader將沒法解析圖片地址，而後npm run dev 或者npm run build以後致使路徑沒有被加工。

 

解決方法：加個require()

摘自：https://blog.csdn.net/qq_39313596/article/details/84644500

<img :src="require('../assets/images/'+imgsrc+'.png')"/>

<img v-lazy="require('../assets/images/'+imgsrc+'.png')"/>

注意：require(../assets/images/）這部分是把整個images文件夾都加載進來了，沒有用到的圖片也會被加載進來。不知道會不會影響頁面加載速度。

本身另外創建了一個文件夾放動態加載的圖片。