antd image预览图片 懒加载

antd的Image组件提供了一个便捷的方式来显示图片，并支持懒加载(lazy loading)功能。懒加载可以优化用户体验，特别是当页面包含大量图片时，它会在图片真正需要显示时才开始加载，而不是一开始就一次性加载所有图片。

在Ant Design (简称antd) 中，你可以通过设置`loadComponent`属性为一个延迟加载组件，例如`<img>`标签配合`IntersectionObserver`来实现懒加载。下面是一个基本示例：

import { Image } from 'antd';
import LazyLoad from 'react-lazyload';

const lazyLoadImage = () => <img alt="加载中" />;

<Image
  src='https://example.com/image.jpg'
  placeholder='https://example.com/loading.gif'
  lazyLoad={LazyLoad}
  loader={lazyLoadImage}
/>

在这个例子中，`src`属性用于存储原始图片地址，`placeholder`用于占位展示，`lazyLoad`属性告诉Image组件只有当图片进入视口时才实际加载图片，而`loader`属性则是加载过程中的占位图。