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

代码演示

如何引入

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

基本用法

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

加载失败的占位图

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

渐进加载

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

自定义预览图片

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

多图预览

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

单独使用预览组件

预览组件 ImagePreview 可以单独使用,通过 visibleonVisibleChange 控制是否预览,通过 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-
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

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

设计变量