如何在React中同时实现响应式图片与懒加载？

你遇到的问题核心在于：当Col和LazyLoadImage都设置height:100%时，容器没有固定的占位高度，图片加载前高度塌陷，导致懒加载的交叉观察器（IntersectionObserver）无法正确判断元素是否进入视口。下面给你两种可行的解决思路：

方法一：用宽高比占位容器（推荐） #

通过CSS给Col容器设置基于图片宽高比的padding-top，提前预留出图片的响应式占位空间，这样既保证图片自适应容器宽度，又能让懒加载正常触发。

步骤1：添加CSS样式 #

.image-wrapper {
  position: relative;
  width: 100%;
  /* 根据你的图片宽高比调整，比如1:1设100%，16:9设56.25% */
  padding-top: 100%; 
  border-radius: 20px;
  overflow: hidden;
}

.image-wrapper .lazy-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，避免拉伸 */
}

步骤2：修改组件代码 #

import { Image, Skeleton, Grid } from "@arco-design/web-react";
import React from "react";
import imgURL from "./pand.jpg";
import { LazyLoadImage } from "react-lazy-load-image-component";
import "react-lazy-load-image-component/src/effects/blur.css";
// 引入上面的CSS文件
import "./ImageLazyLoad.css";

const Row = Grid.Row;
const Col = Grid.Col;

function ImageLazyLoad() {
  return (
    <div>
      <Row className="grid-demo" gutter={[12, 12]}>
        {Array.from({ length: 20 }).map((img, index) => (
          <Col key={index} xs={24} sm={24} md={12} lg={12} xl={12} xxl={12}>
            <div className="image-wrapper">
              <LazyLoadImage
                src={imgURL}
                alt="Image"
                effect="blur"
                className="lazy-image"
                placeholder={<Skeleton className="lazy-image" />}
              />
            </div>
          </Col>
        ))}
      </Row>
    </div>
  );
}

export default ImageLazyLoad;

方法二：利用图片自身的宽高属性 #

如果不想用占位容器，可以给LazyLoadImage设置width:100%，同时去掉height:100%，改用object-fit:cover，并确保图片本身有正确的宽高属性（浏览器会自动计算响应式比例）。

修改后的LazyLoadImage部分：

<LazyLoadImage
  src={imgURL}
  alt="Image"
  effect="blur"
  width="100%"
  // 添加图片原始宽高，让浏览器自动计算响应式高度
  width={800} 
  height={800}
  style={{ borderRadius: "20px", objectFit: "cover" }}
  placeholder={<Skeleton />}
/>

这种方式依赖图片的原始宽高，浏览器会根据容器宽度自动计算对应的高度，同时懒加载的交叉观察器能正确识别元素的位置。

内容的提问来源于stack exchange，提问作者HallGold