React Image.
- Placeholder
- Preview
- Rotate
- Zoom
- Flip
- Fallback
- Multiple Preview
npm install
npm start
import Image from 'rc-image';
export default () => (
<Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
);
Name | Type | Default | Description |
---|---|---|---|
preview | boolean | { visible: boolean, scaleStep: number, onVisibleChange: function(value, prevValue), getContainer: string | HTMLElement | (() => HTMLElement) | false } | true | Whether to show preview |
prefixCls | string | rc-image | Classname prefix |
placeholder | boolean | ReactElement | - | if true will set default placeholder or use ReactElement set customize placeholder |
fallback | string | - | Load failed src |
previewPrefixCls | string | rc-image-preview | Preview classname prefix |
onError | (event: Event) => void | - | Load failed callback |
preview the merged src
import Image from 'rc-image';
export default () => (
<Image.PreviewGroup>
<Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
<Image src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*P0S-QIRUbsUAAAAAAAAAAABkARQnAQ" />
</Image.PreviewGroup>
);
Name | Type | Default | Description |
---|---|---|---|
preview | boolean | { visible: boolean, scaleStep: number, onVisibleChange: function(value, prevValue), getContainer: string | HTMLElement | (() => HTMLElement) | false, countRender?: (current: number, total: number) => string, current: number } |
true | Whether to show preview, current: If Preview the show img index, default 0 |
previewPrefixCls | string | rc-image-preview | Preview classname prefix |
icons | { [iconKey]?: ReactNode } | - | Icons in the top operation bar, iconKey: 'rotateLeft' | 'rotateRight' | 'zoomIn' | 'zoomOut' | 'close' | 'left' | 'right' |
http://localhost:8003/examples/
npm test
npm run coverage
rc-image is released under the MIT license.