坑：

正常情況下都是這樣寫的，但是vant這個框架不知道怎么想的，居然加載不出來，花里胡哨。文檔也沒有寫怎么加載本地圖片，到處挖坑。如圖：

此處省略一萬句臟話。

<van-imagelazy-loadwidth="34rem"height="8rem"fit="contain"src="../assets/logo.png"@click="toMikeRouter(index)"><template v-slot:loading><van-loading type="spinner" size="20" /></template><template v-slot:error>加載失敗</template></van-image>

解決辦法：

src屬性綁定requeir（）方法

:src="require('../assets/logo.png')"

完美解決：

也可以綁定數組：

<van-colv-for="(value, index) in imgList":key="index"span="8"><van-imagewidth="8rem"height="8rem"fit="contain":src="value"><template v-slot:loading><van-loading type="spinner" size="20" /></template><template v-slot:error>加載失敗</template></van-image></van-col>//script(vue)data() {return {//圖片資源imgList: [require("../assets/icon_emeetnote_nor.png"),require("../assets/img_ai_buds01_nor.png")]};},

總結

以上是生活随笔為你收集整理的vant-image本地图片无法显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。