vue图片懒加载

方法一：使用第三方库vue-lazyload

1. 安装：npm install vue-lazyload vue3需要安装npm i vue3-lazyload
2. main.js中引入vue-lazyload并配置：

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

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载的高度比例
  error: 'path/to/error.png', // 图片加载失败时显示的图片
  loading: 'path/to/loading.gif', // 图片加载中显示的图片
  attempt: 1 // 加载错误后的重试次数
});

组件中使用v-lazy 加载图片

<template>
  <img v-lazy="imageSrc" alt="Lazy loaded image">
  </template>

<script>
  export default {
    data() {
      return {
        imageSrc: 'path/to/image.jpg' // 图片的路径
      };
    }
  };
</script>

方法二：使用element-plus自带的<el-iamge>

加载本地图片：

<el-image :src="require('@/assets/1.jpg')" lazy> </el-image>

例子：

<div class="demo-image__lazy">
    <el-image :src="require('@/assets/1.jpg')" lazy> </el-image>
    <el-image :src="require('@/assets/1.jpg')" lazy> </el-image>
    <el-image :src="require('@/assets/1.jpg')" lazy> </el-image>
    <el-image :src="require('@/assets/1.jpg')" lazy> </el-image>
    <el-image :src="require('@/assets/1.jpg')" lazy> </el-image>
    <el-image :src="require('@/assets/1.jpg')" lazy> </el-image>
    <el-image :src="require('@/assets/1.jpg')" lazy> </el-image>
</div>