vue图片懒加载

2024-01-01 14:04:53

方法一:使用第三方库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>

文章来源:https://blog.csdn.net/weixin_63583875/article/details/135259850
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。