--- category: Components group: 数据展示 title: Image subtitle: 图片 description: 可预览的图片。 cols: 2 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FbOCS6aFMeUAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAAAAAAAAAAAADrJ8AQ/original --- ## 何时使用 {#when-to-use} - 需要展示图片时使用。 - 加载显示大图或加载失败时容错处理。 ## 代码演示 {#examples} ### 基本用法 单击图像可以放大显示。 ```tsx import React from 'react'; import { Image } from 'antd'; const App: React.FC = () => ( basic ); export default App; ``` ### 容错处理 加载失败显示图像占位符。 ```tsx import React from 'react'; import { Image } from 'antd'; const App: React.FC = () => ( basic image ); export default App; ``` ### 渐进加载 大图使用 placeholder 渐进加载。 ```tsx import React, { useState } from 'react'; import { Button, Image, Space } from 'antd'; const App: React.FC = () => { const [random, setRandom] = useState(() => Date.now()); return ( basic image } /> ); }; export default App; ``` ### 多张图片预览 点击左右切换按钮可以预览多张图片。 ```tsx import React from 'react'; import { Image } from 'antd'; const App: React.FC = () => ( console.log(`current index: ${current}, prev index: ${prev}`), }} > svg image svg image ); export default App; ``` ### 相册模式 从一张图片点开相册。 ```tsx import React from 'react'; import { Image } from 'antd'; const App: React.FC = () => ( webp image ); export default App; ``` ### 自定义预览图片 可以设置不同的预览图片。 ```tsx import React from 'react'; import { Image } from 'antd'; const App: React.FC = () => ( basic image ); export default App; ``` ### 受控的预览 可以使预览受控。 ```tsx import React, { useState } from 'react'; import { Button, Image, InputNumber } from 'antd'; const App: React.FC = () => { const [open, setOpen] = useState(false); const [scaleStep, setScaleStep] = useState(0.5); return ( <>
scaleStep:{' '} setScaleStep(val!)} />

basic image { setOpen(value); }, }} /> ); }; export default App; ``` ### 自定义工具栏 可以自定义工具栏并添加下载原图或翻转旋转后图片的按钮。 ```tsx import React from 'react'; import { DownloadOutlined, LeftOutlined, RightOutlined, RotateLeftOutlined, RotateRightOutlined, SwapOutlined, UndoOutlined, ZoomInOutlined, ZoomOutOutlined, } from '@ant-design/icons'; import { Image, Space } from 'antd'; const imageList = [ 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg', 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg', ]; // you can download flipped and rotated image // https://codesandbox.io/s/zi-ding-yi-gong-ju-lan-antd-5-7-0-forked-c9jvmp const App: React.FC = () => { const [current, setCurrent] = React.useState(0); // or you can download flipped and rotated image // https://codesandbox.io/s/zi-ding-yi-gong-ju-lan-antd-5-7-0-forked-c9jvmp const onDownload = () => { const url = imageList[current]; const suffix = url.slice(url.lastIndexOf('.')); const filename = Date.now() + suffix; fetch(url) .then((response) => response.blob()) .then((blob) => { const blobUrl = URL.createObjectURL(new Blob([blob])); const link = document.createElement('a'); link.href = blobUrl; link.download = filename; document.body.appendChild(link); link.click(); URL.revokeObjectURL(blobUrl); link.remove(); }); }; return ( ( onActive?.(-1)} /> onActive?.(1)} /> ), onChange: (index) => { setCurrent(index); }, }} > {imageList.map((item, index) => ( {`image-${index}`} ))} ); }; export default App; ``` ### 自定义预览内容 可以自定义预览内容。 ```tsx import React from 'react'; import { Image } from 'antd'; const App: React.FC = () => ( basic image (