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文件夾都加載進來了，沒有用到的圖片也會被加載進來。不知道會不會影響頁面加載速度。

自己另外建立了一個文件夾放動態加載的圖片。