【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>

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