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

```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.             |