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

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;
      }
    },
}

 

查看全部
lidong521you
塔塔庙
2020/11/24 15:07
  • css
  • html5
  • vue.js
  • javascript
  • 点赞
  • 收藏
  • 回答
    私信
满意答案
查看全部

4个回复