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 是占位图的路径，当图片正在加载时会显示占位图。

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

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