The Image component is used to display images.


import { Image } from '@nature-ui/core';


Divine Nature
Editable Example


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

Divine NatureDan AbramovAdam Wathan
Editable Example

Image with border radius#

Tailwindcss is here. You can still apply any tailwindcss classes to style this component.

Divine Nature
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


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
sizestringThis will change the height and width of 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