【Vue】img标签src动态绑定路径不显示图片问题

最新推荐文章于 2024-05-20 10:38:02 发布

原创最新推荐文章于 2024-05-20 10:38:02 发布 · 3.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了在Vue项目中，使用v-for动态加载图片时遇到的问题及解决办法。通过在data属性中使用require()方法，成功实现了动态图片的正确加载。

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

<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'
        }
      ]
    }
  },