---
title: Image
description: "`Image` is a component that displays images."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/image/image.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/image
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-image--basic
---

# Image

`Image` is a component that displays images.

```tsx
<Image
  src="https://dragon-ball-official.com/assets/img/intro/intro_1.png"
  alt="ドラゴンボール"
  boxSize="xl"
/>
```

## Usage

```tsx
import { Image } from "@yamada-ui/react"
```

```tsx
import { Image } from "@/components/ui"
```

```tsx
import { Image } from "@workspaces/ui"
```

```tsx
<Image />
```

## Props

### Image

| Prop          | Default | Type                                                                                                                                     | Description                                |
| ------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                                     | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                                | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                               | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                | Set color scheme variables.                |
| `fit`         | -       | `"-moz-initial" \| "contain" \| "cover" \| "fill" \| "inherit" \| "initial" \| "none" \| "revert-layer" \| "revert" \| "scale-down" ...` | The CSS `object-fit` property.             |

### Img

| Prop          | Default | Type                                                                                                                                     | Description                                |
| ------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                                     | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                                | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                               | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                | Set color scheme variables.                |
| `fit`         | -       | `"-moz-initial" \| "contain" \| "cover" \| "fill" \| "inherit" \| "initial" \| "none" \| "revert-layer" \| "revert" \| "scale-down" ...` | The CSS `object-fit` property.             |

## Similar Components

- [Picture](https://yamada-ui.com/docs/components/picture.md): `Picture` is a component that uses the `picture` element to provide alternative images for different display and device scenarios.
- [AspectRatio](https://yamada-ui.com/docs/components/aspect-ratio.md): `AspectRatio` is a component for embedding things like videos and maps while maintaining the aspect ratio.
- [Icon](https://yamada-ui.com/docs/components/icon.md): `Icon` is a general icon component that can be used in your projects.
- [QrCode](https://yamada-ui.com/docs/components/qr-code.md): `QrCode` is a component that displays a QR code.
- [Avatar](https://yamada-ui.com/docs/components/avatar.md): `Avatar` is a component that displays a profile picture or an icon with initials representing a user.

## Used By Components & Hooks

- [Picture](https://yamada-ui.com/docs/components/picture.md): `Picture` is a component that uses the `picture` element to provide alternative images for different display and device scenarios.