Vue项目优化之图片懒加载vue-lazyload

1、首先安装vue-lazyload

npm i vue-lazyload -S

2、在main.js中引入

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

new Vue({
  el: 'body',
  components: {
    App
  }
})

3、在页面中使用：

<ul>
  <li v-for="img in list">
    <img v-lazy="require('../asserts/img.src')" />
  </li>
</ul>

 

注意： 

在项目中引入vue-lazyload实现图片懒加载功能，
如果使用在线图片路径则加载成功，本地路径的图片的话加载异常，如下：

原因：
vue-lazyload是在main.js文件中引入，不会被webpack进行编译，src中的文件会被webpack编译，包括assets，assets文件夹中的图片地址，会在编译过程中改变。因此vue-lazyload无法正确获得图片地址，就不能显示图片了。

解决办法：

使用require（）进行引入， 如下：