lidong521you
塔塔庙
采纳率41.7%
2020-11-24 15:07 阅读 101

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;
      }
    },
}
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

8条回答 默认 最新

  • 已采纳
    qq_39815900 沫琉璃 2020-11-24 16:17

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

    点赞 1 评论 复制链接分享
  • alnorthword 禅思院 2020-11-24 18:15

    路径没问题,你写代码的逻辑有问题

    点赞 1 评论 复制链接分享
  • weixin_48199629 weixin_48199629 2020-11-24 15:30

    路径对么?这种情况大部分是路径问题

    点赞 评论 复制链接分享
  • lidong521you 塔塔庙 2020-11-24 15:35

    路径对啊,

    点赞 评论 复制链接分享
  • lidong521you 塔塔庙 2020-11-24 15:35

    但是就是不知道怎么回事。

    点赞 评论 复制链接分享
  • lidong521you 塔塔庙 2020-11-24 15:37

    当@mouseenter事件调用函数后,显示就正常了,移出后,又是这个

    点赞 评论 复制链接分享
  • qq_39815900 沫琉璃 2020-11-24 16:18

    而不是把图片路径设置为空

    点赞 评论 复制链接分享
  • lidong521you 塔塔庙 2020-11-25 11:08

    谢谢,点醒梦中人

    点赞 评论 复制链接分享

相关推荐