vue图片懒加载lazy-load

• 第一步安装

npm i vue-lazyload -D

• 第二步引入

import VueLazyload from 'vue-lazyload'

• 第三步简单配置参数（两种图片路径方法）

//最外层static目录下的图片引用Vue.use(VueLazyload,{
    error:'/static/images/logo.png',//图片加载失败时候显示的图片
    loading:'/static/images/loading.gif'//图片还未加载完成时候的loading图片})//src下的assets目录下的图片Vue.use(VueLazyload,{
    error:require('./assets/images/logo.png'),
    loading:require('./assets/images/loading.gif')
})

因为src中的文件会被webpack编译，assets文件夹中的图片地址，会在编译过程中重命名。vue-lazyload是在main.js文件中引入，不会被webpack进行编译，因此vue-lazyload无法获得正确的图片地址，所以直接写相对地址就无法获取到图片正确地址

• 第四步写loading图片的样式（具体怎么写样式根据情况来，也可以不写）

img[lazy="loading"]{  display:block;  width:50px !important;  height:50px !important;  margin:0 auto;
  }

• 第五步使用

:src--->v-lazy把<img :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="item.image" alt="img">
改成<img  v-lazy="item.image" alt="img">

效果加载中

image.png

加载完成

image.png

友情提示（谷歌模拟网速慢的时候看loading效果F12---Network---Slow 3G）

image.png

更多参数

image.png

作者：前端来入坑
链接：https://www.jianshu.com/p/1f73ea7d6030