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

错误代码片段

  <img
    v-for="(item, index) in hsImg"
    :key="index"
    :src="item"
    alt="图"
  />

data() {
return {
  hsImg: [
    "../assets/images/hsimg01.png",
    "../assets/images/hsimg02.png",
    "../assets/images/hsimg03.png",
    "../assets/images/hsimg04.png",
    "../assets/images/hsimg05.png"
  ]
};
}

解决方案

使用require导入方式

  <img
    v-for="(item, index) in hsImg"
    :key="index"
    :src="item"
    alt="图"
  />

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