vue 项目中实现懒加载 左侧图片不显示问题

1.首先 需要 引入第三的插件库

npm install vue-lazyload --save-dev

2.在入口文件

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad)
// 如果不设置 loading 那么预加载的时候显示的图片就是它本身data-src 路径下的图片,所以在这我就没设置其它的实属性了

3.组件内对背景图片实现懒加载

* 效果图如下 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191226112748454.png) 4.组件内 对img 使用懒加载时,左侧的图片出现了问题 (不显示)

 
  
// 对应的 样式
  .bgColor .imgLeft{
    cursor:pointer;
    transform:scale(0.4);
    position: absolute;
    left: -2.5%;
    top: 40%;
    overflow: hidden;
  }
  .bgColor .imgRight{
    cursor:pointer;
    transform:scale(0.4);
    position: absolute;
    right: -2.5%;
    top: 40%;
    overflow: hidden;
  }
  .bgColor .imgBack{
    cursor:pointer;
    transform:scale(0.4);
    position: absolute;
    right: -2.5%;
    bottom: 3%;
    overflow: hidden;
  }

*效果图是

  • 打开浏览器控制台后
    vue 项目中实现懒加载 左侧图片不显示问题_第1张图片
    很明显 图片是存在的,只是一直在预加载状态,所以加载不出来
    5.解决
  • 你我尝试着 把 左边的样式修改
  .bgColor .imgLeft{
    cursor:pointer;
    transform:scale(0.4);
    position: absolute;
    left: 0%;
    top: 40%;
    overflow: hidden;
  }

效果如下
在这里插入图片描述

图片出来了,但是明显不是我想要的位置,

// 显示在上图位置
 left: 0%;

// 下面会显示和右边图标的位置
 left:-2.5%
 // 问题来了 ,可能是位置导致加载不来,但是为什么同样的代码右侧的却能一直出来
 right: -2.5%  效果如上图
  • 这是我还没想到为什么会这样,但是我需要的效果解决了 最后
  .bgColor .imgLeft{
    cursor:pointer;
    transform:scale(0.4);
    position: absolute;
    right: 92.5%;
    top: 40%;
    overflow: hidden;
  }

效果图
在这里插入图片描述

6.小结

  • 如果有人知道为啥会这样请 指教(虽然解决了问题,但还是懵懵的)
  • 如果你和我一样实现懒加载图片时一直是预加载状态,也就是下图这个状态
    在这里插入图片描述
    可以试一试 调整样式,比如
left:5% 改成 right:95%
  • 当时页尝试过在 main.js 对挂载到vue上的lazyed 加loading 配置,图片也是出来,但是问题就是,会造成所有的懒加载的图片 预加载的图片都是一个图片,明显不是我想要的效果,我想要的是(预加载时的图片就是他本身)
  • 也在其它帖子中,看到要设置 key ,然而并没有什么用
  • 还有 用V-lazy 给img 加懒加载 或者时背景图片加懒加载时,如果图片资源时在src 底下的assets文件加下,需要在 引用图片的页面在 用require 导入,不然直接在 v-lazy 后面写图片路径,是会报错的,如何引用如下
data(){
return{
imgUrl: require('/assets/xxx.png')
}
}
 

如果是在和src 平级的static文件夹下,可以直接写图片路径,如下

 

你可能感兴趣的:(vue,实现懒加载)