vue图片加载问题，鼠标移入显示图片，移除不显示，但是加载后都显示未加载

Question

1.使用vue开发页面，加载图片，出现如下图的问题。

图1

标题

1图，刚打开就显示未加载，当鼠标移入可以显示图2

标题

html:
<img src="../../assets/img/main.jpg"  width="100%" height="100%">          
   <div class="img1">
    <img :src="img1src" alt width="100%" height="100%">
   </div>
   <div class="img2">
     <img :src="img2src" alt width="100%" height="100%">
   </div>
   <div class="img4">
     <img :src="img4src" alt width="100%" height="100%">
   </div>	
   <a class="a1" @mouseenter="movein(1)" @click="click(1)" @mouseleave="leave(1)"></a>
   <a class="a2" @mouseenter="movein(2)" @click="click(2)" @mouseleave="leave(2)"></a>
   <a class="a4" @mouseenter="movein(4)" @click="click(4)" @mouseleave="leave(4)"></a>	
   <a class="a5" @mouseenter="movein(5)" @click="click(5)" @mouseleave="leave(5)"></a>	



js:
import img01 from "../../assets/img/loginpic/1.png";
import img02 from "../../assets/img/loginpic/2.png";
import img04 from "../../assets/img/loginpic/4.png";
import img05 from "../../assets/img/loginpic/main.png";
export default {
  data: function () {
    return {
      img1src: "",
      img2src: "",
      img4src: "",
      img5src: "",
      }
methods: {
movein(p) {
      if (p == 1) {
        this.img1src = img01;
      } if (p == 2) {
        this.img2src = img02;
      } if (p == 4) {
        this.img4src = img04;
      } if (p == 5) {
        this.img5src = img05;
      }
    },
}

Answer 1

移出之后图片路径是不是空的，应该移入移出控制图片的显示和隐藏