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}},