amp-image

React Image.

Feature

• [x] Placeholder
• [x] Preview
• [x] Rotate
• [x] Zoom
• [x] Fallback
• [x] Multiple Preview

install

Usage

npm install
npm start

const Image = require('rc-image');

ReactDOM.render(
  <Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
), document.getElementById('root'));

API

| Name | Type | Default | Description | | --- | --- | --- | --- | | preview | boolean | {visible: boolean,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 |

Image.PreviewGroup

preview the merged src

const Image = require('rc-image');

ReactDOM.render(
  <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>
), document.getElementById('root'));

API

| Name | Type | Default | Description | | --- | --- | --- | --- | | preview | boolean | {visible: boolean,onVisibleChange:function(value, prevValue),getContainer: string | HTMLElement | (() => HTMLElement) | false } | true | Whether to show preview | | current | number | 0 | If Preview the show img index |

Example

http://localhost:8003/examples/

Test Case

npm test

Coverage

npm run coverage

License

rc-image is released under the MIT license.