---
id: image
category: media-and-icons
title: Image
package: '@chakra-ui/image'
description:
  The Image component is used to display images with support for fallback.
---

## Import

```js
import { Image } from '@chakra-ui/react'
```

## Usage

```jsx
<Box boxSize='sm'>
  <Image src='https://bit.ly/dan-abramov' alt='Dan Abramov' />
</Box>
```

## Size

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

```jsx
<Stack direction='row'>
  <Image
    boxSize='100px'
    objectFit='cover'
    src='https://bit.ly/dan-abramov'
    alt='Dan Abramov'
  />
  <Image
    boxSize='150px'
    objectFit='cover'
    src='https://bit.ly/dan-abramov'
    alt='Dan Abramov'
  />
  <Image boxSize='200px' src='https://bit.ly/dan-abramov' alt='Dan Abramov' />
</Stack>
```

## Image with border radius

```jsx
<Image
  borderRadius='full'
  boxSize='150px'
  src='https://bit.ly/dan-abramov'
  alt='Dan Abramov'
/>
```

## Fallback support

The `Image` component allows you provide a fallback placeholder. The placeholder
is displayed when:

- The `fallback` or `fallbackSrc` prop is provided
- The image provided in `src` is currently loading
- An error occurred while loading the image `src`
- No `src` prop was passed

You can also opt out of this behavior by passing the `ignoreFallback` prop.

```jsx
<Image src='gibbresh.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

```js
import { Img } from '@chakra-ui/react'
```

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