vue2 图片懒加载vue-lazyload 插件

1、npm install vue-lazyload --save

2、在项目的主文件（例如 main.js）中引入和使用插件：

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

Vue.use(VueLazyload)

3、现在，你可以在需要懒加载图片的组件中使用 v-lazy 指令来实现懒加载。将 src 属性替换为 v-lazy，并设置 lazyLoad 选项为 true：

<template>
  <div>
    <img v-lazy="imageSrc" alt="Lazy Loaded Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'path/to/placeholder.jpg', // 占位图路径
    };
  },
};
</script>

在上述示例中，imageSrc 是图片的实际路径，你可以将其替换为你的图片路径。path/to/placeholder.jpg 是占位图的路径，当图片正在加载时会显示占位图。

这样，当页面滚动到图片位置时，图片将会进行懒加载，减少了初始加载的时间和资源消耗。

希望这个示例对你有所帮助。如果你有其他问题，请随时提问。