展示类 · Image
图片
用于展示和预览图片。

代码演示

如何引入

Image, ImagePreview 从 v2.20.0 版本开始支持

基本用法

通过 src 指定图片路径即可获取一个具有预览功能的图片，通过 width，height 指定图片的宽高

加载失败的占位图

可通过 fallback 自定义加载失败的占位图，该参数类型支持 string 和 ReactNode

渐进加载

大图可通过placeholder实现渐进加载

自定义预览图片

可以通过设置 Image 组件的 src 和 preview 参数中的 src 不同来自定义预览图片

多图预览

使用 ImagePreview 包裹 Image 即可实现多图片预览

单独使用预览组件

预览组件 ImagePreview 可以单独使用，通过 visible 和 onVisibleChange 控制是否预览，通过 src 传入可以预览的图片

渲染在指定容器

可以通过 getPopupContainer 指定预览组件的父级 DOM（需要指定 position: relative)，图片预览将会渲染至该 DOM 中。这会改变浮层 DOM 树位置，但不会改变视图渲染位置。

自定义预览底部操作区

可以使用 renderPreviewMenu 自定义预览底部操作区域
如果想基于默认底部操作区域自定义预览底部操作区域， 可以通过 renderPreviewMenu 的 menuItems 获取默认的 ReactNode, menuItems 是一个 ReactNode 数组，顺序和默认底部操作栏功能区域内容顺序一致，menuItems 参数从 v2.40.0 开始支持

自定义预览顶部展示区

通过 renderHeader 可以自定义预览顶部展示区

API 参考

Image

属性说明类型默认值版本
alt图像描述string-
className自定义样式类名string-
crossOrigin透传给原生 img 标签的 crossorigin'anonymous'｜'use-credentials'-
fallback加载失败容错地址或者自定义加载失败时的显示内容ReactNode-
height图片显示高度number-
imgCls自定义样式类名，透传给 img 节点string-
imgStyle自定义样式，透传给 img 节点CSSProperties-
onClick点击图片的回调(event: any) => void-
onError加载错误回调(event: Event) => void-
onLoad加载成功回调(event: Event) => void-
placeholder图片未加载时候的占位内容ReactNode-
preview预览参数，为 false 时候禁用预览boolean | ImagePreview-
src图片获取地址string-
style自定义样式CSSProperties-
width图片显示宽度number-
setDownloadName设置图片下载名称(src: string) => string-2.40.0
其他支持的属性同 img。其他属性将透传至底层的 img 节点。

ImagePreview

属性说明类型默认值版本
adaptiveTip适应页面操作按钮提示string"适应页面"
className自定义样式类名string-
closable是否显示关闭按钮booleantrue
closeOnEsc点击 esc 关闭预览booleantrue
crossOrigin透传给预览图片的原生 img 标签的 crossorigin'anonymous'｜'use-credentials'-
currentIndex受控属性，当前预览图片下标number-
defaultCurrentIndex首次展示图片下标number-
defaultVisible首次是否开启预览boolean-
disableDownload禁用下载booleanfalse
downloadTip下载操作按钮提示string"下载"
getPopupContainer指定父级 DOM，弹层将会渲染至该 DOM 中，自定义需要设置 container position: relative 这会改变浮层 DOM 树位置，但不会改变视图渲染位置。() => HTMLElement() => document.body
infinite是否无限循环booleanfalse
lazyLoad是否开启懒加载booleantrue
lazyLoadMargin传给 options 中的rootMargin 参数，参考 Intersection Observer APIstring"0px 100px 100px 0px"
maskClosable点击遮罩是否可关闭booleantrue
nextTip下一步操作按钮提示string"下一步"
originTip原始尺寸操作按钮提示string"原始尺寸"
onChange切换图片触发的事件(index: number) => void-
onClose点击关闭按钮时的回调函数() => void-
onDownload图片下载回调函数(src: string, index: number) => void-
onDownloadError图片下载错误回调函数(src: string) => void-v2.54.0
onRotateLeft旋转图片的回调(angle: number) => void-
onNext向后切换图片的回调(index: number) => void-
onPrev向前切换图片的回调(index: number) => void-
onZoomIn图片放大时的回调函数(zoom: number) => void-
onZoomOut图片缩小时的回调函数(zoom: number) => void-
onVisibleChange切换可见状态触发的回调(visible: boolean) => void-
preLoad是否开启预加载booleantrue
preLoadGap预加载的步长number2
previewTitle自定义预览 titleReactNode-
previewCls自定义预览样式类名string-
previewStyle自定义预览样式object-
prevTip上一步操作按钮提示string"上一步"
renderHeader自定义渲染预览顶部信息(info: ReactNode) => ReactNode-
renderPreviewMenu自定义渲染预览底部菜单信息(props: MenuProps) => ReactNode;-
rotateTip旋转操作按钮提示string"旋转"
showTooltip是否展示底部操作区提示booleanfalse
src图片列表信息string | string[]-
style自定义样式CSSProperties-
viewerVisibleDelay隐藏预览操作按钮前的无操作时长number10000
visible受控属性，是否预览boolean-
zIndex预览层层级number1070
zoomInTip放大操作按钮提示string"放大"
zoomOutTip缩小操作按钮提示string"缩小"
zoomStep图片每次缩小/放大比例number0.1
setDownloadName设置图片下载名称(src: string) => string-2.40.0
属性说明类型版本
curPage当前图片页下标number
disabledPrev是否禁用向左切换按钮boolean
disabledNext是否禁用向右切换按钮boolean
disableDownload是否禁用下载按钮boolean
max图片缩放最大比例number
min图片缩放最小比例number
onDownload图片下载的调用函数() => void
onZoomIn图片放大时的调用函数() => void
onZoomOut图片缩小时的调用函数() => void
onPrev向前切换图片的调用函数() => void
onNext向后切换图片的调用函数() => void
onRotateLeft逆时针旋转图片的调用函数() => void
onRotateRight顺时针旋转图片的调用函数() => void
ratio原始尺寸或适应页面按钮状态"adaptation" | "realSize"
step缩放的比例步长number
totalNum可预览的总图片数number
zoom当前图片缩放比例number
menuItems默认底部预览操作区域功能按钮 ReactNode 数组ReactNode[]2.40.0

设计变量