Chakra UI Image - Horizon UI

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#

import { Image } from "@chakra-ui/react"

Usage#

<Box boxSize="sm">
<Image
src="https://i.ibb.co/fdyTwz1/introduction-image-2.png"
alt="Horizon UI"
/>
</Box>
<Box boxSize="sm">
<Image
src="https://i.ibb.co/fdyTwz1/introduction-image-2.png"
alt="Horizon UI"
/>
</Box>

Size#

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

<Stack direction="row">
<Image
boxSize="100px"
objectFit="cover"
src="https://i.ibb.co/fdyTwz1/introduction-image-2.png"
alt="Horizon UI"
/>
<Image
boxSize="150px"
objectFit="cover"
src="https://i.ibb.co/fdyTwz1/introduction-image-2.png"
alt="Free Chakra UI Dashboard"
/>
<Image
boxSize="200px"
src="https://i.ibb.co/fdyTwz1/introduction-image-2.png"
alt="Free Chakra UI Dashboard"
/>
</Stack>
<Stack direction="row">
<Image
boxSize="100px"
objectFit="cover"
src="https://i.ibb.co/fdyTwz1/introduction-image-2.png"
alt="Horizon UI"
/>
<Image
boxSize="150px"
objectFit="cover"
src="https://i.ibb.co/fdyTwz1/introduction-image-2.png"
alt="Free Chakra UI Dashboard"
/>
<Image
boxSize="200px"
src="https://i.ibb.co/fdyTwz1/introduction-image-2.png"
alt="Free Chakra UI Dashboard"
/>
</Stack>

Image with border radius#

<Image
borderRadius="full"
boxSize="150px"
src="https://i.ibb.co/fdyTwz1/introduction-image-2.png"
alt="Horizon UI"
/>
<Image
borderRadius="full"
boxSize="150px"
src="https://i.ibb.co/fdyTwz1/introduction-image-2.png"
alt="Horizon UI"
/>

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="https://i.ibb.co/fdyTwz1/introduction-image-2.png"
fallbackSrc="https://via.placeholder.com/150"
/>
<Image
src="https://i.ibb.co/fdyTwz1/introduction-image-2.png"
fallbackSrc="https://via.placeholder.com/150"
/>

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.

Usage with SSR#

import { Img } from "@chakra-ui/react"

The Img Component provides a fallback for SSR applications which uses the image directly without client side checks.

Props#

align

Description

How to align the image within its bounds. It maps to css `object-position` property.

Type
SystemProps["objectPosition"]

crossOrigin

Description

The key used to set the crossOrigin on the HTMLImageElement into which the image will be loaded. This tells the browser to request cross-origin access when trying to download the image data.

Type
"" | "anonymous" | "use-credentials"

fallback

Description

Fallback element to show if image is loading or image fails.

Type
React.ReactElement

fallbackSrc

Description

Fallback image src to show if image is loading or image fails. Note 🚨: We recommend you use a local image

Type
string

fit

Description

How the image to fit within its bounds. It maps to css `object-fit` property.

Type
SystemProps["objectFit"]

htmlHeight

Description

The native HTML height attribute to the passed to the img

Type
string | number

htmlWidth

Description

The native HTML width attribute to the passed to the img

Type
string | number

ignoreFallback

Description

If true, opt out of the fallbackSrc logic and use as img

Type
boolean

onError

Description

A callback for when there was an error loading the image src

Type
((error: string | SyntheticEvent<HTMLImageElement, Event>) => void)

onLoad

Description

A callback for when the image src has been loaded

Type
((event: SyntheticEvent<HTMLImageElement, Event>) => void)

sizes

Description

The image sizes attribute

Type
string

src

Description

The image src attribute

Type
string

srcSet

Description

The image srcset attribute

Type
string

Horizon UI © 2021-2023 Copyright. All Rights Reserved.

  • Blog
  • License