react图片懒加载-vite官方地址: https://www.npmjs.com/package/react-laz

官方地址: www.npmjs.com/package/rea…
// 适用于vite构建的react项目

1, 下载安装懒加载模块

cnpm i react-lazy-load-image-component

2, 在src/assets/目录下放入懒加载占位图 placeholder.gif

3, 在需要使用懒加载的组件中导入懒加载模块和占位图(blur.css虚化样式)

import { LazyLoadImage } from "react-lazy-load-image-component";
import 'react-lazy-load-image-component/src/effects/blur.css';
import placeholder from "@/asset/placeholder.jpg"

4, 在组件rander函数中创建占位图片标签img

var holderImg = <img src="{placeholder}" >

5, 在组件模板中给需要懒加载的图片替换成LazyLoadImage

<LazyLoadImage 
     placeholder={holderImg} 
     alt="图片"
     src={item.room_src} 
     effect="blur" 
 />