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

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

npm install vue-lazyload --save-dev

2.在入口文件

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

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

* 效果图如下  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;
  }

*效果图是

• 打开浏览器控制台后
  
  很明显 图片是存在的，只是一直在预加载状态，所以加载不出来
  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文件夹下，可以直接写图片路径，如下