09.使用vue-lazyload实现图片懒加载

vue-lazyload组件官网：https://www.npmjs.com/package/vue-lazyload

场景一：在有些情况下我们是使用背景图，如下所示，这种情况下如何使用vue-lazyload组件实现图片懒加载。

• 1.首先先安装vue-lazyload 插件

  
  
  
• 2.在main.js中引入vue.lazyload

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad)

• 3.在使用背景图的地方按照如下修改。

场景二：在img标签的src属性引入的图片需要懒加载

未使用懒加载：

  

      

        
        {{item.name}}
      
  

使用懒加载：

 

      

        
        {{item.name}}