【Vue】img标签src动态绑定路径不显示图片问题
可正常显示:<img src="@/imgs/recommend-1.png" />当使用v-for动态获取路径时不能显示图片。(在此使用了vant)<van-swipe-item v-for="(item, index) in recommends" :key="index"><img :src="item.img" /></van-swipe-item
·
把路径写死时可正常显示:
<img src="@/imgs/recommend-1.png" />
当使用v-for动态获取路径时不能显示图片。(在此使用了vant)
<van-swipe-item v-for="(item, index) in recommends" :key="index">
<img :src="item.img" />
</van-swipe-item>
data() {
return {
recommends: [
{
title: 'test',
content: 'just test',
time: '2020-01-01 00:00:00',
img: '@/imgs/recommend-1.png'
},
{
title: 'test2',
content: 'just test again',
time: '2020-01-01 00:00:10',
img: '@/imgs/recommend-2.png'
}
]
}
},
解决办法
data中的数据加上require()即可。
img: require('@/imgs/recommend-1.png')
更多推荐
已为社区贡献1条内容
所有评论(0)