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

最新推荐文章于 2025-05-21 23:43:40 发布

CCC0203

最新推荐文章于 2025-05-21 23:43:40 发布

阅读量3.5k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/CCC0203/article/details/106815212

Vue 专栏收录该内容

7 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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