图片 Image

增强版的 img 标签，提供多种图片填充方式和加载状态处理。

何时使用

• 需要设置图片的 object-fit 属性
• 需要优雅地处理图片加载失败的情况
• 需要在图片加载过程中显示占位内容

示例

基础用法

最简单的用法，直接传入图片地址。

不同状态

展示图片组件的不同状态：无图片、正常加载、加载失败。

图片填充方式

通过 objectFit 属性控制图片在容器中的填充方式。

图片画廊

展示多张图片组成的画廊。

API

Image

参数	说明	类型	默认值
src	图片地址	string	-
alt	图片替代文本	string	-
objectFit	图片填充方式	'contain' | 'cover' | 'fill' | 'none' | 'scale-down'	'cover'
className	自定义类名	string	-
style	自定义样式	React.CSSProperties	-
onLoad	图片加载完成回调	React.EventHandler<React.SyntheticEvent<HTMLImageElement>>	-
onError	图片加载失败回调	React.EventHandler<React.SyntheticEvent<HTMLImageElement>>	-

objectFit 说明

• cover: 保持图片纵横比，缩放图片使图片完全覆盖容器
• contain: 保持图片纵横比，缩放图片使图片完整显示在容器内
• fill: 拉伸图片以完全填充容器，可能改变图片纵横比
• none: 保持图片原始尺寸
• scale-down: 在 none 和 contain 中选择较小的一个