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#

Segun Adebayo
Editable Example

Size#

The size of the image can be adjusted using the size prop.

Segun AdebayoDan AbramovDan Abramov
Editable Example

Rounded Image#

Segun Adebayo
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#

NameTypeDefaultDescription
srcstringThe path to the image source
fallbackSrcstringIn event there was an error loading the src, specify a fallback. In most cases, this can be an avatar or image placeholder
altstringThe alt text that describes the image
onLoadfunctionA callback for when the image src has been loaded
onErrorfunctionA callback for when there was an error loading the image src
htmlWidthstring, numberThe native HTML width attribute of the img element
htmlHeightstring, numberThe native HTML height attribute of the img element
ignoreFallbackbooleanOpt out of the fallbackSrc logic and use the Image directly

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2019 Segun Adebayo