Vue中使用v-for遍历本地图片地址不正确问题解决

最新推荐文章于 2024-03-13 11:16:51 发布

JackieDYH

最新推荐文章于 2024-03-13 11:16:51 发布

阅读量974

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： require vue html 图片路径 v-for循环图片

本文链接：https://blog.csdn.net/JackieDYH/article/details/109443418

Vue 专栏收录该内容

376 篇文章

订阅专栏

博客指出Vue编译后存在图片地址不正确的问题，给出了错误代码片段，并提供解决方案，即使用require导入方式来解决图片路径问题。

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

编译出来后，图片地址不正确

错误代码片段

<div class="hsimg">
  <img
	v-for="(item, index) in hsImg"
	:key="index"
	:src="item"
	alt="图"
  />
</div>
data() {
return {
  hsImg: [
	"../assets/images/hsimg01.png",
	"../assets/images/hsimg02.png",
	"../assets/images/hsimg03.png",
	"../assets/images/hsimg04.png",
	"../assets/images/hsimg05.png"
  ]
};
},

解决方案

使用require导入方式

<div class="hsimg">
  <img
	v-for="(item, index) in hsImg"
	:key="index"
	:src="item"
	alt="图"
  />
</div>
data() {
return {
  hsImg: [
	require("../assets/images/hsimg01.png"),
	require("../assets/images/hsimg02.png"),
	require("../assets/images/hsimg03.png"),
	require("../assets/images/hsimg04.png"),
	require("../assets/images/hsimg05.png"),
  ]
};
},