Skip to Content
Sponsor

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 boxSize prop.

Segun AdebayoDan AbramovDan Abramov
Editable Example

Image with border radius#

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

Improvements from v1#

  • Added support for the fit prop to specify how to fit an image within its dimension. It uses the object-fit property

  • Added support for the align prop to specify how to align the image within its dimension. It uses the object-position property

  • Added support for custom fallback component

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
fitstringThe CSS object-fit property for the image
alignstringThe CSS object-position property for the image
Edit this page