Show · Image
Image
Used to display and preview images.

Demos

How to import

Image, ImagePreview supported since v2.20.0

Basic usage

You can get an image with preview function by specifying the image path through src, and specify the width and height of the image through width, height

Loading failed placeholder

You can customize the placeholder for failed loading through fallback, which supports string and ReactNode

Progressive loading

Large images can be progressively loaded through placeholder

Customize the preview image

You can customize the preview image by setting the src of the Image component to be different from the src in the preview parameter

Multi-image preview

Use ImagePreview to wrap Image to achieve multi-image preview

Use the preview component alone

The preview component ImagePreview can be used alone, through visible and onVisibleChange to control whether to preview, and src to pass in the image that can be previewed

Render in the specified container

You can specify the parent DOM of the preview component through getPopupContainer (you need to specify position: relative), and the image preview will be rendered into this DOM. This will change the DOM tree position, but not the view's rendering position.

Customize the bottom operation area of the preview

The bottom action area of the preview can be customized using renderPreviewMenu
If you want to customize the preview bottom operation area based on the default bottom operation area, you can get the default ReactNodes through the menuItems of renderPreviewMenu. menuItems is an array of ReactNodes, and the order is consistent with the content order of the default bottom operation bar area. The menuItems parameter is supported from v2.40.0.

Customize the preview top display area

You can customize the preview top display area through renderHeader

API reference

Image

PropertiesInstructionsTypeDefaultVersion
altImage descriptionstring-
classNamecustom style class namestring-
crossOriginPassthrough to the crossorigin of the native img tag'anonymous' | 'use-credentials'-
fallbackCustom loading failed display contentReactNode-
imgClsCustom style class name, transparently passed to img nodestring-
imgStyleCustom styles, transparently passed to img nodeCSSProperties-
heightImage display heightnumber-
onClickClick callback on image(event: Event) => void-
onErrorLoad error callback(event: Event) => void-
onLoadLoad success callback(event: Event) => void-
placeholderPlaceholder content when the image is not loadedReactNode-
previewPreview parameter, when false, disable previewboolean | ImagePreview-
srcImage acquisition addressstring-
stylecustom styleCSSProperties-
widthImage display widthnumber-
setDownloadNameSet the name of the downloaded image(src: string) => string-2.40.0
Other attributes same as img。Other attributes will be transmitted to the underlying img node.

ImagePreview

PropertiesInstructionsTypeDefaultVersion
adaptiveTipAdapt to page action button promptsstring"Adapt to the page"
classNameCustom style class namestring-
closableWhether to show the close buttonBooleantrue
closeOnEscHit esc to close the previewbooleantrue
currentIndexControlled property, the current preview image subscriptnumber-
defaultCurrentIndexFirst display image subscriptnumber-
defaultVisibleWhether to open the preview for the first timeboolean-
disableDownloadDisable downloadsbooleanfalse
downloadTipDownload action button promptstring"Download"
getPopupContainerSpecify the parent DOM, and the pop-up layer will be rendered into the DOM. For customization, you need to set container position: relative This will change the DOM tree position, but not the view's rendering position.() => HTMLElement;() => document.body
infiniteWhether to loop infinitelybooleanfalse
lazyLoadWhether to enable lazy loadingbooleantrue
lazyLoadMarginPass to the rootMargin parameter in options, refer to Intersection Observer APIstring"0px 100px 100px 0px"
maskClosableWhether the mask can be closed by clickingBooleantrue
nextTipNext action button promptstring"Next"
originTipOriginal size action button tipsstring"Original size"
onChangeEvent triggered by switching pictures(index: number) => void-
onCloseThe callback function when the close button is clicked() => void-
onDownloadImage download callback function(src: string, index: number) => void-
onDownloadErrorImage download error callback(src: string) => void-v2.54.0
onRotateLeftCallback for rotating the image(angle: number) => void-
onNextCallback for switching pictures backwards(index: number) => void-
onPrevCallback for switching the picture forward(index: number) => void-
onZoomInThe callback function when the image is zoomed in(zoom: number) => void-
onZoomOutThe callback function when the image is zoomed out(zoom: number) => void-
onVisibleChangeCallback triggered by toggle visible state(visible: boolean) => void-
preLoadWhether to enable preloadingbooleantrue
preLoadGapPreloaded step sizenumber2
previewTitleCustom preview titleReactNode-
previewClsCustom preview style class namestring-
previewStyleCustom preview styleobject-
prevTipPrevious operation button promptstring"Previous"
renderHeaderCustom render preview top info(info: reactNode) => ReactNode-
renderPreviewMenuCustom render preview bottom menu information(props: MenuProps) => ReactNode;-
rotateTipTips for rotating action buttonsstring"Rotate"
showTooltipWhether to display the bottom operation area promptbooleanfalse
srcImage list informationstring | string[]-
styleCustom styleCSSProperties-
viewerVisibleDelayThe length of time of inactivity before hiding the preview action buttonnumber10000
visibleControlled property, whether to previewboolean-
zIndexPreview layer hierarchynumber1070
zoomInTipZoom in action button tipsstring"Zoom in"
zoomOutTipZoom out action button promptstring"Zoom out"
zoomStepImage reduction/enlargement ratio each timenumber0.1
setDownloadNameSet the name of the downloaded image(src: string) => string-2.40.0
PropertiesInstructionsTypeVersion
curPageCurrent image page subscriptnumber
disabledPrevWhether to disable the left toggle buttonboolean
disabledNextWhether to disable the right toggle buttonboolean
disableDownloadWhether to disable the download buttonboolean
maxThe maximum ratio of image zoomnumber
minThe minimum ratio of image scalingnumber
onDownloadCall function when the image is downloaded() => void
onZoomInCall function when the image is zoomed in() => void
onZoomOutCall function when the image is zoomed out() => void
onPrevCall function to switch the picture forward() => void
onNextCall function to switch the picture backward() => void
onRotateLeftCall function to rotate the image counterclockwise() => void
onRotateRightCall function to rotate the image clockwise() => void
ratioOriginal size or Fit to page button state"adaptation" | "realSize"
stepStep size of scalingnumber
totalNumThe total number of images that can be previewednumber
zoomCurrent image magnification rationumber
menuItemsDefault bottom preview operation area function button ReactNode arrayReactNode[]2.40.0

Design Token