Image is able to show picture(s), that could display placeholder simple image when loading pretty large pictures, also it could fallback to broken image if picture loading failed.
In addition, the following HTML native attributes are also supported:
crossOrigin、decoding、loading、referrerPolicy、sizes、srcSet、useMap.
Basic usage of Image component.
Showcase fill modes.
| Properties | Description | Type | Default |
|---|---|---|---|
| alt | The description of the image/picture | string | - |
| draggable | Whether to allow users to drag the image | boolean | false |
| fallback | The fallback broken image when load failed | ReactNode | default fallback ReactNode |
| fit | The fill mode of the image | contain | cover | fill | none | scale-down | fill |
| height | The height of the image, if a number is passed in, the unit is px | string | number | - |
| lazy | Whether to load image lazily | boolean | false |
| onClick | The image click event | (event: React.MouseEvent<HTMLImageElement, Event>) => void | - |
| onContainerClick | The content click event | (event: React.MouseEvent<HTMLDivElement, Event>) => void | - |
| onError | Callback when failed to load | (event: React.SyntheticEvent<HTMLImageElement, Event>) => void | - |
| onLoad | Triggered when image loaded | (event: React.SyntheticEvent<HTMLImageElement, Event>) => void | - |
| placeholder | The placeholder when loading the image | ReactNode | default placeholder ReactNode |
| src | The address of the image | string | - |
| width | The width of the image, if a number is passed in, the unit is px | string | number | - |