## Image 组件示例
### 基本用法
单击图像可以放大显示。
```tsx
import React from 'react';
import { Image } from 'antd';
const App: React.FC = () => (
);
export default App;
```
### 容错处理
加载失败显示图像占位符。
```tsx
import React from 'react';
import { Image } from 'antd';
const App: React.FC = () => (
);
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 (
}
/>
);
};
export default App;
```
### 多张图片预览
点击左右切换按钮可以预览多张图片。
```tsx
import React from 'react';
import { Image } from 'antd';
const App: React.FC = () => (
console.log(`current index: ${current}, prev index: ${prev}`),
}}
>
);
export default App;
```
### 相册模式
从一张图片点开相册。
```tsx
import React from 'react';
import { Image } from 'antd';
const App: React.FC = () => (
);
export default App;
```
### 自定义预览图片
可以设置不同的预览图片。
```tsx
import React from 'react';
import { Image } from 'antd';
const App: React.FC = () => (
);
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!)}
/>
{
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) => (
))}
);
};
export default App;
```
### 自定义预览内容
可以自定义预览内容。
```tsx
import React from 'react';
import { Image } from 'antd';
const App: React.FC = () => (
(
),
actionsRender: () => null,
}}
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
);
export default App;
```
### 预览遮罩
遮罩效果。
```tsx
import React from 'react';
import { Image, Space } from 'antd';
const App: React.FC = () => {
return (
blur
),
}}
/>
Dimmed mask
),
}}
/>
No mask
),
}}
/>
);
};
export default App;
```
### 自定义语义结构的样式和类
通过 `classNames` 和 `styles` 传入对象/函数可以自定义 Image 的[语义化结构](#semantic-dom)样式。
```tsx
import React from 'react';
import { Flex, Image } from 'antd';
import type { ImageProps } from 'antd';
import { createStaticStyles } from 'antd-style';
const classNames = createStaticStyles(({ css }) => ({
root: css`
padding: 4px;
border-radius: 8px;
overflow: hidden;
`,
}));
const styles: ImageProps['styles'] = {
image: {
borderRadius: '4px',
},
};
const stylesFn: ImageProps['styles'] = (info) => {
if (info.props.preview) {
return {
root: {
border: '2px solid #A594F9',
borderRadius: 8,
padding: 4,
transition: 'all 0.3s ease',
},
image: {
borderRadius: 4,
filter: 'grayscale(50%)',
},
} satisfies ImageProps['styles'];
}
return {};
};
const App: React.FC = () => {
const sharedProps: ImageProps = {
src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
width: 160,
alt: '示例图片',
classNames,
};
return (
);
};
export default App;
```
### 自定义预览文本
自定义预览文本。
```tsx
import React from 'react';
import { ZoomInOutlined } from '@ant-design/icons';
import { Image, Space } from 'antd';
const App: React.FC = () => (
示例
),
}}
/>
);
export default App;
```
### 自定义预览遮罩位置
设置预览遮罩显示的位置
```tsx
import React from 'react';
import { ZoomInOutlined } from '@ant-design/icons';
import { Image, Space } from 'antd';
const App: React.FC = () => {
return (
center
),
placement: 'center',
},
}}
/>
top
),
placement: 'top',
},
}}
/>
bottom
),
placement: 'bottom',
},
}}
/>
);
};
export default App;
```
### 嵌套
嵌套在弹框当中使用
```tsx
import React, { useState } from 'react';
import { Button, Divider, Image, Modal } from 'antd';
const App: React.FC = () => {
const [show1, setShow1] = useState(false);
const [show2, setShow2] = useState(false);
const [show3, setShow3] = useState(false);
return (
<>
{
setShow1(open);
}}
onCancel={() => {
setShow1(false);
}}
onOk={() => setShow1(false)}
>
{
setShow2(open);
}}
onCancel={() => {
setShow2(false);
}}
onOk={() => setShow2(false)}
>
{
setShow3(open);
}}
onCancel={() => {
setShow3(false);
}}
onOk={() => setShow3(false)}
>
console.log(`current index: ${current}, prev index: ${prev}`),
}}
>
);
};
export default App;
```
### 多图预览时顶部进度自定义
多图预览时顶部展示进度, 支持自定义
```tsx
import React from 'react';
import { Image } from 'antd';
const App: React.FC = () => (
`当前 ${current} / 总计 ${total}` }}
>
);
export default App;
```
### 自定义组件 Token
自定义组件 Token。
```tsx
import React from 'react';
import { ConfigProvider, Image } from 'antd';
const App: React.FC = () => (
`当前 ${current} / 总计 ${total}` }}
>
);
export default App;
```
### 在渲染函数中获取图片信息
在渲染函数中获取图片的信息。
```tsx
import React from 'react';
import { Image } from 'antd';
const src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
const App: React.FC = () => (
{JSON.stringify(image)}
,
actionsRender: (_, { image }) => {JSON.stringify(image)}
,
}}
/>
);
export default App;
```