坑:
正常情况下都是这样写的,但是vant这个框架不知道怎么想的,居然加载不出来,花里胡哨。文档也没有写怎么加载本地图片,到处挖坑。如图:
此处省略一万句脏话。
<van-image
lazy-load
width="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-col
v-for="(value, index) in imgList"
:key="index"
span="8"
>
<van-image
width="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")
]
};
},