Ant Design

⌘ K

6.4.3

Image
图片

可预览的图片。

使用import { Image } from 'antd';

反馈

components/image 提交问题待解决

文档

编辑此页 LLMs.md

文档贡献者

Empty空状态 List列表

Ant Design

⌘ K

6.4.3

Image
图片

可预览的图片。

使用import { Image } from 'antd';

反馈

components/image 提交问题待解决

文档

编辑此页 LLMs.md

文档贡献者

Empty空状态 List列表

何时使用

需要展示图片时使用。
加载显示大图或加载失败时容错处理。

代码演示

API

通用属性参考：通用属性

Image

参数	说明	类型	默认值
alt	图像描述	string	-
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
fallback	加载失败容错地址	string	-
height	图像高度	string \| number	-
placeholder	加载占位，支持 ReactNode 或配置对象	PlaceholderType	-
preview	预览参数，为 `false` 时禁用	boolean \| PreviewType	true
src	图片地址	string	-
styles	用于自定义组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-
width	图像宽度	string \| number	-
onError	加载错误回调	(event: Event) => void	-

其他属性见 <img>

PlaceholderType

参数	说明	类型	默认值	版本
progress	进度配置，设置为 `true` 显示渐变动画，设置 `{ percent: number }` 显示进度，`render` 自定义渲染	boolean \| ImageProgressConfig	-

ImageProgressConfig

参数	说明	类型	默认值	版本
percent	进度值	number	-
render	自定义渲染，接收默认的进度 UI 和百分比	(progress: React.ReactNode, percent: number) => React.ReactNode	-

PreviewType

参数	说明	类型	默认值	版本
actionsRender	自定义工具栏渲染	(originalNode: React.ReactElement, info: ToolbarRenderInfoType) => React.ReactNode	-
closeIcon	自定义关闭 Icon	React.ReactNode	-
cover	自定义预览遮罩	React.ReactNode \| CoverConfig	-	CoverConfig v6.0 开始支持
focusTrap	预览打开时是否在预览内捕获焦点	boolean	true	6.4.0
~~destroyOnClose~~	关闭预览时销毁子元素，已移除，不再支持	boolean	false
~~forceRender~~	强制渲染预览图，已移除，不再支持	boolean	-
getContainer	指定预览挂载的节点，但依旧为全屏展示，false 为挂载在当前位置	string \| HTMLElement \| (() => HTMLElement) \| false	-
imageRender	自定义预览内容	(originalNode: React.ReactElement, info: { transform: TransformType, image: ImgInfo }) => React.ReactNode	-
mask	预览遮罩效果	boolean \| { enabled?: boolean, blur?: boolean, closable?: boolean }	true	mask.closable: 6.4.0
~~maskClassName~~	缩略图遮罩类名，请使用 `classNames.cover` 替换	string	-
maxScale	最大缩放倍数	number	50
minScale	最小缩放倍数	number	1
movable	是否可移动	boolean	true
open	是否显示预览	boolean	-
rootClassName	预览图的根 DOM 类名，会同时作用在图片和预览层最外侧	string	-
scaleStep	`1 + scaleStep` 为缩放放大的每步倍数	number	0.5
src	自定义预览 src	string	-
styles	自定义语义化结构样式	Record<SemanticDOM, CSSProperties>	-
~~toolbarRender~~	自定义工具栏，请使用 `actionsRender` 替换	(originalNode: React.ReactElement, info: Omit<ToolbarRenderInfoType, 'current' \| 'total'>) => React.ReactNode	-
~~visible~~	是否显示，请使用 `open` 替换	boolean	-
onOpenChange	预览打开状态变化的回调	(visible: boolean) => void	-
onTransform	预览图 transform 变化的回调	{ transform: TransformType, action: TransformAction }	-
~~onVisibleChange~~	当 `visible` 发生改变时的回调，请使用 `onOpenChange` 替换	(visible: boolean, prevVisible: boolean) => void	-

PreviewGroup

参数	说明	类型	默认值
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
fallback	加载失败容错地址	string	-
items	预览数组	string[] \| { src: string, crossOrigin: string, ... }[]	-
preview	预览参数，为 `false` 时禁用	boolean \| PreviewGroupType	true

PreviewGroupType

参数	说明	类型	默认值	版本
actionsRender	自定义工具栏渲染	(originalNode: React.ReactElement, info: ToolbarRenderInfoType) => React.ReactNode	-
closeIcon	自定义关闭 Icon	React.ReactNode	-
countRender	自定义预览计数内容	(current: number, total: number) => React.ReactNode	-
focusTrap	预览打开时是否在预览内捕获焦点	boolean	true	6.4.0
current	当前预览图的 index	number	-
~~forceRender~~	强制渲染预览图，已移除，不再支持	boolean	-
getContainer	指定预览挂载的节点，但依旧为全屏展示，false 为挂载在当前位置	string \| HTMLElement \| (() => HTMLElement) \| false	-
imageRender	自定义预览内容	(originalNode: React.ReactElement, info: { transform: TransformType, image: ImgInfo, current: number }) => React.ReactNode	-
mask	预览遮罩效果	boolean \| { enabled?: boolean, blur?: boolean, closable?: boolean }	true	mask.closable: 6.4.0
~~maskClassName~~	缩略图遮罩类名，请使用 `classNames.cover` 替换	string	-
minScale	最小缩放倍数	number	1
maxScale	最大放大倍数	number	50
movable	是否可移动	boolean	true
open	是否显示预览	boolean	-
~~rootClassName~~	预览图的根 DOM 类名，会同时作用在图片和预览层最外侧，请使用 `classNames.root` 替换	string	-
styles	自定义语义化结构样式	Record<SemanticDOM, CSSProperties>	-
scaleStep	`1 + scaleStep` 为缩放放大的每步倍数	number	0.5
~~toolbarRender~~	自定义工具栏，请使用 `actionsRender` 替换	(originalNode: React.ReactElement, info: ToolbarRenderInfoType) => React.ReactNode	-
~~visible~~	是否显示，请使用 `open` 替换	boolean	-
onOpenChange	预览打开状态变化回调，额外携带当前预览图索引	(visible: boolean, info: { current: number }) => void	-
onChange	切换预览图的回调	(current: number, prevCurrent: number) => void	-
onTransform	预览图 transform 变化的回调	{ transform: TransformType, action: TransformAction }	-
~~onVisibleChange~~	当 `visible` 发生改变时的回调，请使用 `onOpenChange` 替换	(visible: boolean, prevVisible: boolean, current: number) => void	-

Interface

TransformType

typescript

{
  x: number;
  y: number;
  rotate: number;
  scale: number;
  flipX: boolean;
  flipY: boolean;
}

TransformAction

typescript

type TransformAction =
  | 'flipY'
  | 'flipX'
  | 'rotateLeft'
  | 'rotateRight'
  | 'zoomIn'
  | 'zoomOut'
  | 'close'
  | 'prev'
  | 'next'
  | 'wheel'
  | 'doubleClick'
  | 'move'
  | 'dragRebound'
  | 'reset';

ToolbarRenderInfoType

typescript

{
  icons: {
    flipYIcon: React.ReactNode;
    flipXIcon: React.ReactNode;
    rotateLeftIcon: React.ReactNode;
    rotateRightIcon: React.ReactNode;
    zoomOutIcon: React.ReactNode;
    zoomInIcon: React.ReactNode;
  };
  actions: {
    onActive?: (index: number) => void; // 5.21.0 之后支持
    onFlipY: () => void;
    onFlipX: () => void;
    onRotateLeft: () => void;
    onRotateRight: () => void;
    onZoomOut: () => void;
    onZoomIn: () => void;
    onReset: () => void; // 5.17.3 之后支持
    onClose: () => void;
  };
  transform: TransformType,
  current: number;
  total: number;
  image: ImgInfo
}

ImgInfo

typescript

{
  url: string;
  alt: string;
  width: string | number;
  height: string | number;
}

CoverConfig

typescript

type CoverConfig = {
  coverNode?: React.ReactNode; // 自定义遮罩元素
  placement?: 'top' | 'bottom' | 'center'; // 设置预览遮罩显示的位置
};

Semantic DOM

root
根元素，设置相对定位和行内块布局样式
image
图片元素，设置宽度、高度和垂直对齐样式
cover
悬浮图片显示的提示元素，设置绝对定位、背景色、透明度和过渡动画样式
popup.root
预览根元素，设置固定定位、层级和背景遮罩样式
popup.mask
预览遮罩元素，设置绝对定位和半透明背景样式
popup.body
预览内容元素，设置flex布局、居中对齐和指针事件样式
popup.footer
预览页脚元素，设置绝对定位、居中布局和底部操作区域样式
popup.actions
预览操作组元素，设置flex布局、背景色、圆角和操作按钮样式
popup.close
6.4.0
预览关闭按钮元素，设置按钮的基础样式

主题变量（Design Token）

组件 Token如何定制？

Token 名称	描述	类型	默认值
previewOperationColor	预览操作图标颜色	string	rgba(255,255,255,0.65)
previewOperationColorDisabled	预览操作图标禁用颜色	string	rgba(255,255,255,0.25)
previewOperationHoverColor	预览操作图标悬浮颜色	string	rgba(255,255,255,0.85)
previewOperationSize	预览操作图标大小	number	18
progressAnimationDuration	加载动画基础时长	string	3s
zIndexPopup	预览浮层 z-index	number	1080

全局 Token如何定制？

Token 名称	描述	类型	默认值
colorBgBase	用于派生背景色梯度的基础变量，v5 中我们添加了一层背景色的派生算法可以产出梯度明确的背景色的梯度变量。但请不要在代码中直接使用该 Seed Token ！	string	#fff
colorBgContainerDisabled	控制容器在禁用状态下的背景色。	string	rgba(0,0,0,0.04)
colorBgMask	浮层的背景蒙层颜色，用于遮罩浮层下面的内容，Modal、Drawer、Image 等组件的蒙层使用的是该 token	string	rgba(0,0,0,0.45)
colorPrimaryBorder	主色梯度下的描边用色，用在 Slider 等组件的描边上。	string	#91caff
colorTextLightSolid	控制带背景色的文本，例如 Primary Button 组件中的文本高亮颜色。	string	#fff
colorTextSecondary	作为第二梯度的文本色，一般用在不那么需要强化文本颜色的场景，例如 Label 文本、Menu 的文本选中态等场景。	string	rgba(0,0,0,0.65)
borderRadiusXS	XS号圆角，用于组件中的一些小圆角，如 Segmented 、Arrow 等一些内部圆角的组件样式中。	number	2
controlHeightLG	较高的组件高度	number	40
fontSize	设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。	number	14
lineWidthFocus	控制线条的宽度，当组件处于聚焦态时。	number	3
margin	控制元素外边距，中等尺寸。	number	16
marginSM	控制元素外边距，中小尺寸。	number	12
marginXL	控制元素外边距，超大尺寸。	number	32
marginXS	控制元素外边距，小尺寸。	number	8
motionDurationMid	动效播放速度，中速。用于中型元素动画交互	string	0.2s
motionDurationSlow	动效播放速度，慢速。用于大型元素如面板动画交互	string	0.3s
motionEaseInOut	预设动效曲率	string	cubic-bezier(0.645, 0.045, 0.355, 1)
motionEaseOut	预设动效曲率	string	cubic-bezier(0.215, 0.61, 0.355, 1)
paddingLG	控制元素的大内间距。	number	24
paddingSM	控制元素的小内间距。	number	12

何时使用

需要展示图片时使用。
加载显示大图或加载失败时容错处理。

代码演示

基本用法

单击图像可以放大显示。

Loading

loading...

50%

Generating 75%

Generating 0%

渐进加载

通过 placeholder 属性设置占位符。当 placeholder 为 { progress: true } 时显示水彩墨水加载动画；设置为 { progress: { percent: number } } 时显示进度条；也可以传入自定义 React 节点作为占位符。

加载失败显示图像占位符。

点击左右切换按钮可以预览多张图片。

从一张图片点开相册。

可以设置不同的预览图片。

scaleStep:

受控的预览

可以使预览受控。

自定义工具栏

可以自定义工具栏并添加下载原图或翻转旋转后图片的按钮。

自定义预览内容

可以自定义预览内容。

blur

Dimmed mask

No mask

预览遮罩

遮罩效果。

自定义语义结构的样式和类

通过 classNames 和 styles 传入对象/函数可以自定义 Image 的语义化结构样式。

6.0.0

嵌套

嵌套在弹框当中使用

API

通用属性参考：通用属性

Image

参数	说明	类型	默认值
alt	图像描述	string	-
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
fallback	加载失败容错地址	string	-
height	图像高度	string \| number	-
placeholder	加载占位，支持 ReactNode 或配置对象	PlaceholderType	-
preview	预览参数，为 `false` 时禁用	boolean \| PreviewType	true
src	图片地址	string	-
styles	用于自定义组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-
width	图像宽度	string \| number	-
onError	加载错误回调	(event: Event) => void	-

其他属性见 <img>

PlaceholderType

参数	说明	类型	默认值	版本
progress	进度配置，设置为 `true` 显示渐变动画，设置 `{ percent: number }` 显示进度，`render` 自定义渲染	boolean \| ImageProgressConfig	-

ImageProgressConfig

参数	说明	类型	默认值	版本
percent	进度值	number	-
render	自定义渲染，接收默认的进度 UI 和百分比	(progress: React.ReactNode, percent: number) => React.ReactNode	-

PreviewType

参数	说明	类型	默认值	版本
actionsRender	自定义工具栏渲染	(originalNode: React.ReactElement, info: ToolbarRenderInfoType) => React.ReactNode	-
closeIcon	自定义关闭 Icon	React.ReactNode	-
cover	自定义预览遮罩	React.ReactNode \| CoverConfig	-	CoverConfig v6.0 开始支持
focusTrap	预览打开时是否在预览内捕获焦点	boolean	true	6.4.0
~~destroyOnClose~~	关闭预览时销毁子元素，已移除，不再支持	boolean	false
~~forceRender~~	强制渲染预览图，已移除，不再支持	boolean	-
getContainer	指定预览挂载的节点，但依旧为全屏展示，false 为挂载在当前位置	string \| HTMLElement \| (() => HTMLElement) \| false	-
imageRender	自定义预览内容	(originalNode: React.ReactElement, info: { transform: TransformType, image: ImgInfo }) => React.ReactNode	-
mask	预览遮罩效果	boolean \| { enabled?: boolean, blur?: boolean, closable?: boolean }	true	mask.closable: 6.4.0
~~maskClassName~~	缩略图遮罩类名，请使用 `classNames.cover` 替换	string	-
maxScale	最大缩放倍数	number	50
minScale	最小缩放倍数	number	1
movable	是否可移动	boolean	true
open	是否显示预览	boolean	-
rootClassName	预览图的根 DOM 类名，会同时作用在图片和预览层最外侧	string	-
scaleStep	`1 + scaleStep` 为缩放放大的每步倍数	number	0.5
src	自定义预览 src	string	-
styles	自定义语义化结构样式	Record<SemanticDOM, CSSProperties>	-
~~toolbarRender~~	自定义工具栏，请使用 `actionsRender` 替换	(originalNode: React.ReactElement, info: Omit<ToolbarRenderInfoType, 'current' \| 'total'>) => React.ReactNode	-
~~visible~~	是否显示，请使用 `open` 替换	boolean	-
onOpenChange	预览打开状态变化的回调	(visible: boolean) => void	-
onTransform	预览图 transform 变化的回调	{ transform: TransformType, action: TransformAction }	-
~~onVisibleChange~~	当 `visible` 发生改变时的回调，请使用 `onOpenChange` 替换	(visible: boolean, prevVisible: boolean) => void	-

PreviewGroup

参数	说明	类型	默认值
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
fallback	加载失败容错地址	string	-
items	预览数组	string[] \| { src: string, crossOrigin: string, ... }[]	-
preview	预览参数，为 `false` 时禁用	boolean \| PreviewGroupType	true

PreviewGroupType

参数	说明	类型	默认值	版本
actionsRender	自定义工具栏渲染	(originalNode: React.ReactElement, info: ToolbarRenderInfoType) => React.ReactNode	-
closeIcon	自定义关闭 Icon	React.ReactNode	-
countRender	自定义预览计数内容	(current: number, total: number) => React.ReactNode	-
focusTrap	预览打开时是否在预览内捕获焦点	boolean	true	6.4.0
current	当前预览图的 index	number	-
~~forceRender~~	强制渲染预览图，已移除，不再支持	boolean	-
getContainer	指定预览挂载的节点，但依旧为全屏展示，false 为挂载在当前位置	string \| HTMLElement \| (() => HTMLElement) \| false	-
imageRender	自定义预览内容	(originalNode: React.ReactElement, info: { transform: TransformType, image: ImgInfo, current: number }) => React.ReactNode	-
mask	预览遮罩效果	boolean \| { enabled?: boolean, blur?: boolean, closable?: boolean }	true	mask.closable: 6.4.0
~~maskClassName~~	缩略图遮罩类名，请使用 `classNames.cover` 替换	string	-
minScale	最小缩放倍数	number	1
maxScale	最大放大倍数	number	50
movable	是否可移动	boolean	true
open	是否显示预览	boolean	-
~~rootClassName~~	预览图的根 DOM 类名，会同时作用在图片和预览层最外侧，请使用 `classNames.root` 替换	string	-
styles	自定义语义化结构样式	Record<SemanticDOM, CSSProperties>	-
scaleStep	`1 + scaleStep` 为缩放放大的每步倍数	number	0.5
~~toolbarRender~~	自定义工具栏，请使用 `actionsRender` 替换	(originalNode: React.ReactElement, info: ToolbarRenderInfoType) => React.ReactNode	-
~~visible~~	是否显示，请使用 `open` 替换	boolean	-
onOpenChange	预览打开状态变化回调，额外携带当前预览图索引	(visible: boolean, info: { current: number }) => void	-
onChange	切换预览图的回调	(current: number, prevCurrent: number) => void	-
onTransform	预览图 transform 变化的回调	{ transform: TransformType, action: TransformAction }	-
~~onVisibleChange~~	当 `visible` 发生改变时的回调，请使用 `onOpenChange` 替换	(visible: boolean, prevVisible: boolean, current: number) => void	-

Interface

TransformType

typescript

{
  x: number;
  y: number;
  rotate: number;
  scale: number;
  flipX: boolean;
  flipY: boolean;
}

TransformAction

typescript

type TransformAction =
  | 'flipY'
  | 'flipX'
  | 'rotateLeft'
  | 'rotateRight'
  | 'zoomIn'
  | 'zoomOut'
  | 'close'
  | 'prev'
  | 'next'
  | 'wheel'
  | 'doubleClick'
  | 'move'
  | 'dragRebound'
  | 'reset';

ToolbarRenderInfoType

typescript

{
  icons: {
    flipYIcon: React.ReactNode;
    flipXIcon: React.ReactNode;
    rotateLeftIcon: React.ReactNode;
    rotateRightIcon: React.ReactNode;
    zoomOutIcon: React.ReactNode;
    zoomInIcon: React.ReactNode;
  };
  actions: {
    onActive?: (index: number) => void; // 5.21.0 之后支持
    onFlipY: () => void;
    onFlipX: () => void;
    onRotateLeft: () => void;
    onRotateRight: () => void;
    onZoomOut: () => void;
    onZoomIn: () => void;
    onReset: () => void; // 5.17.3 之后支持
    onClose: () => void;
  };
  transform: TransformType,
  current: number;
  total: number;
  image: ImgInfo
}

ImgInfo

typescript

{
  url: string;
  alt: string;
  width: string | number;
  height: string | number;
}

CoverConfig

typescript

type CoverConfig = {
  coverNode?: React.ReactNode; // 自定义遮罩元素
  placement?: 'top' | 'bottom' | 'center'; // 设置预览遮罩显示的位置
};

Semantic DOM

root
根元素，设置相对定位和行内块布局样式
image
图片元素，设置宽度、高度和垂直对齐样式
cover
悬浮图片显示的提示元素，设置绝对定位、背景色、透明度和过渡动画样式
popup.root
预览根元素，设置固定定位、层级和背景遮罩样式
popup.mask
预览遮罩元素，设置绝对定位和半透明背景样式
popup.body
预览内容元素，设置flex布局、居中对齐和指针事件样式
popup.footer
预览页脚元素，设置绝对定位、居中布局和底部操作区域样式
popup.actions
预览操作组元素，设置flex布局、背景色、圆角和操作按钮样式
popup.close
6.4.0
预览关闭按钮元素，设置按钮的基础样式

主题变量（Design Token）

组件 Token如何定制？

Token 名称	描述	类型	默认值
previewOperationColor	预览操作图标颜色	string	rgba(255,255,255,0.65)
previewOperationColorDisabled	预览操作图标禁用颜色	string	rgba(255,255,255,0.25)
previewOperationHoverColor	预览操作图标悬浮颜色	string	rgba(255,255,255,0.85)
previewOperationSize	预览操作图标大小	number	18
progressAnimationDuration	加载动画基础时长	string	3s
zIndexPopup	预览浮层 z-index	number	1080

全局 Token如何定制？

Token 名称	描述	类型	默认值
colorBgBase	用于派生背景色梯度的基础变量，v5 中我们添加了一层背景色的派生算法可以产出梯度明确的背景色的梯度变量。但请不要在代码中直接使用该 Seed Token ！	string	#fff
colorBgContainerDisabled	控制容器在禁用状态下的背景色。	string	rgba(0,0,0,0.04)
colorBgMask	浮层的背景蒙层颜色，用于遮罩浮层下面的内容，Modal、Drawer、Image 等组件的蒙层使用的是该 token	string	rgba(0,0,0,0.45)
colorPrimaryBorder	主色梯度下的描边用色，用在 Slider 等组件的描边上。	string	#91caff
colorTextLightSolid	控制带背景色的文本，例如 Primary Button 组件中的文本高亮颜色。	string	#fff
colorTextSecondary	作为第二梯度的文本色，一般用在不那么需要强化文本颜色的场景，例如 Label 文本、Menu 的文本选中态等场景。	string	rgba(0,0,0,0.65)
borderRadiusXS	XS号圆角，用于组件中的一些小圆角，如 Segmented 、Arrow 等一些内部圆角的组件样式中。	number	2
controlHeightLG	较高的组件高度	number	40
fontSize	设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。	number	14
lineWidthFocus	控制线条的宽度，当组件处于聚焦态时。	number	3
margin	控制元素外边距，中等尺寸。	number	16
marginSM	控制元素外边距，中小尺寸。	number	12
marginXL	控制元素外边距，超大尺寸。	number	32
marginXS	控制元素外边距，小尺寸。	number	8
motionDurationMid	动效播放速度，中速。用于中型元素动画交互	string	0.2s
motionDurationSlow	动效播放速度，慢速。用于大型元素如面板动画交互	string	0.3s
motionEaseInOut	预设动效曲率	string	cubic-bezier(0.645, 0.045, 0.355, 1)
motionEaseOut	预设动效曲率	string	cubic-bezier(0.215, 0.61, 0.355, 1)
paddingLG	控制元素的大内间距。	number	24
paddingSM	控制元素的小内间距。	number	12

基本用法

单击图像可以放大显示。

Loading

loading...

50%

Generating 75%

Generating 0%

渐进加载

通过 placeholder 属性设置占位符。当 placeholder 为 { progress: true } 时显示水彩墨水加载动画；设置为 { progress: { percent: number } } 时显示进度条；也可以传入自定义 React 节点作为占位符。

加载失败显示图像占位符。

点击左右切换按钮可以预览多张图片。

从一张图片点开相册。

可以设置不同的预览图片。

scaleStep:

受控的预览

可以使预览受控。

自定义工具栏

可以自定义工具栏并添加下载原图或翻转旋转后图片的按钮。

自定义预览内容

可以自定义预览内容。

blur

Dimmed mask

No mask

预览遮罩

遮罩效果。

自定义语义结构的样式和类

通过 classNames 和 styles 传入对象/函数可以自定义 Image 的语义化结构样式。

6.0.0

嵌套

嵌套在弹框当中使用

Image图片

Image图片

何时使用

代码演示

API

Image

PlaceholderType

ImageProgressConfig

PreviewType

PreviewGroup

PreviewGroupType

Interface

TransformType

TransformAction

ToolbarRenderInfoType

ImgInfo

CoverConfig

Semantic DOM

root

image

cover

popup.root

popup.mask

popup.body

popup.footer

popup.actions

popup.close

主题变量（Design Token）

何时使用

代码演示

API

Image

PlaceholderType

ImageProgressConfig

PreviewType

PreviewGroup

PreviewGroupType

Interface

TransformType

TransformAction

ToolbarRenderInfoType

ImgInfo

CoverConfig

Semantic DOM

root

image

cover

popup.root

popup.mask

popup.body

popup.footer

popup.actions

popup.close

主题变量（Design Token）

Image
图片

Image
图片