logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.2
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Image

Preview-able image.
Importimport { Image } from "antd";
Sourcecomponents/image
Docs
Edit this pageChangelog

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community

When To Use

  • When you need to display pictures.
  • Display when loading a large image or fault tolerant handling when loading fail.

Examples

API

Common props ref:Common props

Image

PropertyDescriptionTypeDefaultVersion
altImage descriptionstring-4.6.0
fallbackLoad failure fault-tolerant srcstring-4.6.0
heightImage heightstring | number-4.6.0
placeholderLoad placeholder, use default placeholder when set trueReactNode-4.6.0
previewpreview config, disabled when falseboolean | PreviewTypetrue4.6.0 PreviewType:4.7.0
srcImage pathstring-4.6.0
widthImage widthstring | number-4.6.0
onErrorLoad failed callback(event: Event) => void-4.12.0

Other attributes <img>

PreviewType

PropertyDescriptionTypeDefaultVersion
visibleWhether the preview dialog is visible or notboolean--
srcCustom preview srcstring-4.10.0
getContainerThe mounted node for preview dialog but still display at fullScreenstring | HTMLElement | (() => HTMLElement) | false-4.8.0
movablewhether can be movedbooleantrue5.8.0
maskThumbnail maskReactNode-4.9.0
maskClassNameThe className of the maskstring-4.11.0
rootClassNameThe classname of the preview root DOM,The v6 will be moved to the root component.string-5.4.0
scaleStep1 + scaleStep is the step to increase or decrease the scalenumber0.5-
minScaleMin scalenumber15.7.0
maxScaleMax scalenumber505.7.0
closeIconCustom close iconReact.ReactNode-5.7.0
forceRenderForce render preview dialogboolean--
toolbarRenderCustom toolbar render(originalNode: React.ReactElement, info: Omit<ToolbarRenderInfoType, 'current' | 'total'>) => React.ReactNode-5.7.0, info.image: 5.18.0
imageRenderCustom preview content(originalNode: React.ReactElement, info: { transform: TransformType, image: ImgInfo }) => React.ReactNode-5.7.0, image: 5.18.0
destroyOnCloseDestroy child elements when closing previewbooleanfalse
destroyOnHiddenDestroy child elements when closing previewbooleanfalse5.25.0
onTransformCallback when the transform of image changed{ transform: TransformType, action: TransformAction }-5.7.0
onVisibleChangeCallback when visible changed(visible: boolean, prevVisible: boolean) => void--

PreviewGroup

PropertyDescriptionTypeDefaultVersion
previewPreview config, disabled when falseboolean | PreviewGroupTypetrue4.6.0 PreviewGroupType:4.7.0
itemsPreview itemsstring[] | { src: string, crossOrigin: string, ... }[]-5.7.0
fallbackLoad failure fault-tolerant srcstring-5.7.0

PreviewGroupType

PropertyDescriptionTypeDefaultVersion
visibleWhether the preview dialog is visible or notboolean--
getContainerThe mounted node for preview dialog but still display at fullScreenstring | HTMLElement | (() => HTMLElement) | false-4.8.0
movablewhether can be movedbooleantrue5.8.0
currentThe index of the current previewnumber-4.12.0
maskThumbnail maskReactNode-4.9.0
maskClassNameThe className of the maskstring-4.11.0
rootClassNameThe classname of the preview root DOMstring-5.4.0
scaleStep1 + scaleStep is the step to increase or decrease the scalenumber0.5-
minScaleMin scalenumber15.7.0
maxScaleMax scalenumber505.7.0
closeIconCustom close iconReact.ReactNode-5.7.0
forceRenderForce render preview dialogboolean--
countRenderCustom preview count content(current: number, total: number) => React.ReactNode-4.20.0
toolbarRenderCustom toolbar render(originalNode: React.ReactElement, info: ToolbarRenderInfoType) => React.ReactNode-5.7.0, info.image: 5.18.0
imageRenderCustom preview content(originalNode: React.ReactElement, info: { transform: TransformType, image: ImgInfo, current: number }) => React.ReactNode-5.7.0, image: 5.18.0
onTransformCallback when the transform of image changed{ transform: TransformType, action: TransformAction }-5.7.0
onChangeCallback when switch preview image(current: number, prevCurrent: number) => void-5.3.0
onVisibleChangeCallback when visible changed(visible: boolean, prevVisible: boolean, current: number) => void-current Property 5.3.0

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';

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; // support after 5.21.0
onFlipY: () => void;
onFlipX: () => void;
onRotateLeft: () => void;
onRotateRight: () => void;
onZoomOut: () => void;
onZoomIn: () => void;
onReset: () => void; // support after 5.17.3
onClose: () => void;
};
transform: TransformType,
current: number;
image: ImgInfo
}

ImgInfo

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

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
previewOperationColorColor of preview operation iconstringrgba(255,255,255,0.65)
previewOperationColorDisabledDisabled color of preview operation iconstringrgba(255,255,255,0.25)
previewOperationHoverColorColor of hovered preview operation iconstringrgba(255,255,255,0.85)
previewOperationSizeSize of preview operation iconnumber18
zIndexPopupz-index of preview popupnumber1080
Global TokenHow to use?
Basic Usage

Click the image to zoom in.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Fault tolerant

Load failed to display image placeholder.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Progressive Loading

Progressive when large image loading.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Multiple image preview

Click the left and right switch buttons to preview multiple images.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Preview from one image

Preview a collection from one image.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Custom preview image

You can set different preview image.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Controlled Preview

You can make preview controlled.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Custom toolbar render

You can customize the toolbar and add a button for downloading the original image or downloading the flipped and rotated image.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Custom preview render

You can customize the preview content.

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
nested

Nested in the modal

CodeSandbox Icon
codeblock
codepen icon
External Link Icon
expand codeexpand code
Preview
Preview
Preview
Preview
Preview
Preview
Preview
scaleStep:

Preview
Preview
Preview
Preview