在写项目时遇到了使用vant引用本地图片作为图标时,图标不显示的问题,代码如下:
<van-cell-group v-for="(item,index) in list" :key="item.id+'id'">
<van-cell :icon="'../../assets/img'+item.id.slice(0,2)+'.png'">
{{item.goodName}}
</van-cell>
</van-cell-group>
从浏览器的调试器中可以看到商品前有图片占位,但是不显示,查了一些资料后找到的解决方法如下:
使用require()
<van-cell-group v-for="(item,index) in list" :key="item.id+'id'">
<van-cell :icon="require('../../assets/img'+item.id.slice(0,2)+'.png')">
{{item.goodName}}
</van-cell>
</van-cell-group>