vue-lazyload使用

1. 安装

npm i vue-lazyload --save-dev

2. 引入

// main.js
import VueLazyLoad from 'vue-lazyload'

Vue.use(VueLazyLoad, {
  // 这里为了简单只配置loading属性，还可以配置比如error属性
  loading: '/imgs/loading-svg/loading-bars.svg'
})

3. 到项目里面修改img标签
   
   把v-bind:src改为如下代码：
   
   

注意：

这样就会报错，因为指令里面的值都是变量，刚才上面不报错是因为item.img是一个变量：

所以我们这里需要用单引号把图片路径变成一个字符串：