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