vue2项目引入vue-lazyload实现图片懒加载

VueLazyload 在 Vue 2 中‌是可以使用的‌，但需要注意版本兼容性和正确配置：

安装插件

首先，通过 npm 安装 vue-lazyload。为了确保与 Vue 2 兼容，需要安装特定版本：

npm install vue-lazyload@1.2.4 --save

在 Vue 2 项目中全局注册

在项目的入口文件（通常是 main.js）中引入并使用该插件。

// main.js
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

// 全局注册插件
Vue.use(VueLazyload, {
  // 可选的配置项
  loading: require('@/assets/img/common/placeholder.png'), // 加载中的图片
  error: require('@/assets/img/common/error.png'), // 加载失败的图片
  // preLoad: 1.3, // 预加载比例
  // attempt: 1, // 尝试加载次数
})

　　

在组件中使用 v-lazy 指令

在需要实现懒加载的图片上，使用 v-lazy 指令代替 src 属性

<template>
  <div>
    <!-- 正常的图片路径 -->
    <img v-lazy="imageSrc" alt="Lazy Loaded Image" />
    <!-- 或者使用对象形式，可以指定 loading 和 error 图片 -->
    <img v-lazy="imgObj" alt="Lazy Loaded Image with config" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/large-image.jpg',
      imgObj: {
        src: 'https://example.com/large-image.jpg',
        loading: require('@/assets/img/common/loading.gif'),
        error: require('@/assets/img/common/error.gif'),
      }
    }
  }
}
</script>