Image

The Image component is used to display images with support for fallback.

Import#

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

Usage#

<Box className="w-1/2 h-w-1/2">
  <Image alt="Divine Nature" src="http://bit.ly/divine_n" />
</Box>

Size#

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

<Stack row>
  <Image size="100px" alt="Divine Nature" src="http://bit.ly/divine_n" />
  <Image size="150px" src="https://bit.ly/dan-abramov" alt="Dan Abramov" />
  <Image size="200px" alt="Adam Wathan" src="https://bit.ly/adam-wathan" />
</Stack>

Image with border radius#

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

<Image
  className="rounded-full"
  size="150px"
  src="https://bit.ly/divine_n"
  alt="Divine Nature"
/>

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.

<Image
  src="blank.png"
  fallbackSrc="https://via.placeholder.com/150"
  onError={(e) => console.log(e)}
/>

Props#

Name	Type	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
`size`	`string`	This will change the `height` and `width` of 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