Image
The Image component is used to display images.
Image composes Box so you can use all the style props and add responsive
styles as well.
Import#
Usage#
Editable Example
Size#
The size of the image can be adjusted using the size prop.
Editable Example
Rounded Image#
Editable Example
Fallback support#
You can provide a fallback image for when there is an error loading the src of
the image. You can also opt out of this behavior by passing the ignoreFallback
prop.
Editable Example
Props#
| Name | Type | Default | Description |
|---|---|---|---|
src | string | The path to the image source | |
fallbackSrc | string | In event there was an error loading the src, specify a fallback. In most cases, this can be an avatar or image placeholder | |
alt | string | The alt text that describes the image | |
onLoad | function | A callback for when the image src has been loaded | |
onError | function | A callback for when there was an error loading the image src | |
htmlWidth | string, number | The native HTML width attribute of the img element | |
htmlHeight | string, number | The native HTML height attribute of the img element | |
ignoreFallback | boolean | Opt out of the fallbackSrc logic and use the Image directly |