vue.js之vue-cli图片懒加载

首先,安装vue-lazyload

 npm install vue-lazyload -D

然后,在src/main.js中引入

 //注意Vue.use(VueLazyload,{})在import VueLazyload的前面,否则无法使用
 Vue.use(VueLazyload, {
   preLoad: 1.3,
   //错误时显示的图片
   error: '../static/image/error.jpg',
   //图片加载中显示的图片
   loading: '../static/image/loading.gif',
   attempt: 1
 })
import VueLazyload from 'vue-lazyload'

最后,在组件中使用

 //将img的src换成v-lazy就行
 

你可能感兴趣的:(vue.js之vue-cli图片懒加载)