vue动态添加图片，路径正确但加载不出来

sd_zhao18

于 2021-12-12 00:26:30 发布

阅读量897

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/cs_zhao18/article/details/121882076

Vue 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了在Vue模板中如何使用require关键字处理相对路径和绝对路径的图片资源，展示了在<div v-for>循环中加载图片的例子，确保在不同环境下都能正确显示。

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

如下图在路径前加上require后，相对路径和绝对路径都能正常显示。

<div v-for="item in banner" :key="item">
    <img :src="item.src">
</div>

banner:[{
		src: require("../assets/426.jpg")
	},
       {
		src: require("D:"+"\\"+"demo"+"\\"+"src"+"\\"+"assets"+"\\"+"2.jpg")
    }]