vue懒加载图片

vue-lazyload 是一个基于 Vue.js 的图片懒加载插件，可以实现在图片进入可视区域前不加载图片，减少网页的加载时间和带宽使用。

1.安装 vue-lazyload
npm install vue-lazyload --save

2.在main.js当中引入vue-lazyload，vue-lazyload 需要指定一个默认占位图，用于在图片未加载完成前展示给用户，可以配置全局默认的占位图。

import Vue from 'vue';
import VueLazyload from 'vue-lazyload';

Vue.use(VueLazyload, {
    error: require('./assets/loading.svg'),
    loading: require('./assets/loading.svg'),
    attempt: 1
  }
)

3.在组件中使用 v-lazy 指令指定懒加载的图片地址

<template>
  <div class="image-container">
    <img v-lazy="imageUrl" alt="懒加载图片" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg',
    };
  },
};
</script>