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

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

错误代码片段

<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"),
  ]
};
},