Image
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.
<Image src={SOME_IMAGE_SRC} /><Image src={SOME_IMAGE_SRC} />Example
Basic usage of Image component.
Image lazy load (big picture - 2.6M)
Image load failed (display fallback broken image)
Showcase fill modes.
Image fill mode - contain
Image fill mode - cover
Image fill mode - fill
Image fill mode - none
Image fill mode - scale-down
API
| 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 | - |