把路径写死时可正常显示:

<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')
Logo

前往低代码交流专区

更多推荐