# rc-image

> React easy to use image component

Latest version **7.12.0** (published 2025-04-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install rc-image
pnpm add rc-image
yarn add rc-image
bun add rc-image
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 7.12.0 |
| Published | 2025-04-22 |
| First published | 2018-01-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 155.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 211 |
| Maintainers | afc163, zombiej, ycjcl868, dahong, madccc |
| Keywords | react, react-component, react-image, image |

## Links

- npm: https://www.npmjs.com/package/rc-image
- Repository: https://github.com/react-component/image
- Homepage: http://github.com/react-component/image
- Issues: http://github.com/react-component/image/issues
- npm.io page: https://npm.io/package/rc-image

## Dependencies (6)

- [rc-util](https://npm.io/package/rc-util.md) ^5.34.1
- [rc-dialog](https://npm.io/package/rc-dialog.md) ~9.6.0
- [rc-motion](https://npm.io/package/rc-motion.md) ^2.6.2
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.11.2
- [@rc-component/portal](https://npm.io/package/@rc-component/portal.md) ^1.0.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 7.12.0 (latest) — 2025-04-22
- 7.11.1 — 2025-03-17
- 7.11.0 — 2024-09-09
- 7.10.0 — 2024-06-11
- 7.9.0 — 2024-06-06
- 7.8.1 — 2024-06-05
- 7.8.0 — 2024-05-15
- 7.7.1 — 2024-05-15
- 7.7.0 — 2024-05-04
- 7.6.0 — 2024-02-29
- 7.5.1 — 2023-11-24
- 7.5.0 — 2023-11-21
- 7.4.0 — 2023-11-21
- 7.3.2 — 2023-10-31
- 7.3.1 — 2023-09-20
- … 79 more at https://npm.io/package/rc-image/versions

## README

# rc-image

React Image.

<!-- prettier-ignore -->
[![NPM version][npm-image]][npm-url]
[![npm download][download-image]][download-url]
[![build status][github-actions-image]][github-actions-url]
[![Codecov][codecov-image]][codecov-url]
[![bundle size][bundlephobia-image]][bundlephobia-url]
[![dumi][dumi-image]][dumi-url]

[npm-image]: http://img.shields.io/npm/v/rc-image.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-image
[github-actions-image]: https://github.com/react-component/image/workflows/CI/badge.svg
[github-actions-url]: https://github.com/react-component/image/actions
[travis-image]: https://img.shields.io/travis/react-component/image/master?style=flat-square
[travis-url]: https://travis-ci.org/react-component/image
[circleci-image]: https://img.shields.io/circleci/build/github/react-component/image/master?style=flat-square
[circleci-url]: https://circleci.com/gh/react-component/image
[coveralls-image]: https://img.shields.io/coveralls/react-component/image.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/react-component/image?branch=master
[codecov-image]: https://img.shields.io/codecov/c/gh/react-component/image?style=flat-square
[codecov-url]: https://codecov.io/gh/react-component/image
[david-url]: https://david-dm.org/react-component/image
[david-image]: https://david-dm.org/react-component/image/status.svg?style=flat-square
[david-dev-url]: https://david-dm.org/react-component/image?type=dev
[david-dev-image]: https://david-dm.org/react-component/image/dev-status.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/rc-image.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-image
[bundlephobia-url]: https://bundlephobia.com/result?p=rc-image
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-image
[dumi-url]: https://github.com/umijs/dumi
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square

## Feature

- [x] Placeholder
- [x] Preview
- [x] Rotate
- [x] Zoom
- [x] Flip
- [x] Fallback
- [x] Multiple Preview

## install

[![rc-image](https://nodei.co/npm/rc-image.png)](https://npmjs.org/package/rc-image)

## Usage

```bash
npm install
npm start
```

```js
import Image from 'rc-image';

export default () => (
  <Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
);
```

## API

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| preview | boolean \| [PreviewType](#PreviewType) | 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 |

### PreviewType

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| visible | boolean | - | Whether the preview is open or not |
| closeIcon | React.ReactNode | - | Custom close icon |
| src | string | - | Customize preview src |
| movable | boolean | true | Enable drag |
| scaleStep | number | 0.5 | The number to which the scale is increased or decreased |
| minScale | number | 1 | Min scale |
| maxScale | number | 50 | Max scale |
| forceRender | boolean | - | Force render preview |
| getContainer | string \| HTMLElement \| (() => HTMLElement) \| false | document.body | Return the mount node for preview |
| imageRender | (originalNode: React.ReactElement, info: { transform: [TransformType](#TransformType) }) => React.ReactNode | - | Customize image |
| toolbarRender | (originalNode: React.ReactElement, info: Omit<[ToolbarRenderInfoType](#ToolbarRenderInfoType), 'current' \| 'total'>) => React.ReactNode | - | Customize toolbar |
| onVisibleChange | (visible: boolean, prevVisible: boolean) => void | - | Callback when visible is changed |
| onTransform | { transform: [TransformType](#TransformType), action: [TransformAction](#TransformAction) } | - | Callback when transform is changed |

## Image.PreviewGroup

preview the merged src

```js
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>
);
```

### API

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| preview | boolean \| [PreviewGroupType](#PreviewGroupType) | true | Whether to show preview, <br> 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' |
| fallback | string | - | Load failed src |
| items | (string \| { src: string, alt: string, crossOrigin: string, ... })[] | - | preview group |

### PreviewGroupType

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| visible | boolean | - | Whether the preview is open or not |
| movable | boolean | true | Enable drag |
| current | number | - | Current index |
| closeIcon | React.ReactNode | - | Custom close icon |
| scaleStep | number | 0.5 | The number to which the scale is increased or decreased |
| minScale | number | 1 | Min scale |
| maxScale | number | 50 | Max scale |
| forceRender | boolean | - | Force render preview |
| getContainer | string \| HTMLElement \| (() => HTMLElement) \| false | document.body | Return the mount node for preview |
| countRender | (current: number, total: number) => ReactNode | - | Customize count |
| imageRender | (originalNode: React.ReactElement, info: { transform: [TransformType](#TransformType), current: number }) => React.ReactNode | - | Customize image |
| toolbarRender | (originalNode: React.ReactElement, info: [ToolbarRenderInfoType](#ToolbarRenderInfoType)) => React.ReactNode | - | Customize toolbar |
| onVisibleChange | (visible: boolean, prevVisible: boolean, current: number) => void | - | Callback when visible is changed |
| onTransform | { transform: [TransformType](#TransformType), action: [TransformAction](#TransformAction) } | - | Callback when transform is changed |

### 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: {
    prevIcon?: React.ReactNode;
    nextIcon?: React.ReactNode;
    flipYIcon: React.ReactNode;
    flipXIcon: React.ReactNode;
    rotateLeftIcon: React.ReactNode;
    rotateRightIcon: React.ReactNode;
    zoomOutIcon: React.ReactNode;
    zoomInIcon: React.ReactNode;
  };
  actions: {
    onActive?: (offset: number) => void;
    onFlipY: () => void;
    onFlipX: () => void;
    onRotateLeft: () => void;
    onRotateRight: () => void;
    onZoomOut: () => void;
    onZoomIn: () => void;
    onClose: () => void;
    onReset: () => void;
  };
  transform: {
    x: number;
    y: number;
    rotate: number;
    scale: number;
    flipX: boolean;
    flipY: boolean;
  },
  current: number;
  total: number;
}
```

## Example

http://localhost:8003/examples/

## Test Case

```
npm test
```

## Coverage

```
npm run coverage
```

## License

rc-image is released under the MIT license.

---
_Source: https://npm.io/package/rc-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._