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
把
改成

效果加载中

加载完成

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

更多参数

详情请看lazy-load官网：https://www.npmjs.com/package/vue-lazyload