vue-lazyload实现图片懒加载

vue-lazyload实现图片懒加载

1. 在终端通过npm工具下载安装vue-lazyload图片懒加载插件

npm install vue-lazyload --save

2. 在项目的mian.js文件中导入插件

import VueLazyLoad from 'vue-lazyload';

3. 通过Vue.use()使用插件

// 使用图片懒加载插件
Vue.use(VueLazyLoad,{
  //占位符图片
  loading: require('./assets/img/Chen_AC/Chen_AC.png')
});

4. 在组件中通过v-lazy=“”方式加载图片

<img v-lazy="showImage" alt="" @load="imageLoad">


//这里以计算属性的方式加载图片路径
computed: {
      showImage(){
        return this.goodsItem.image || this.goodsItem.show.img
      }
    },