---
title: Image
description: >-
  An image component with load-state tracking, fallback sources, and fallback
  rendering on failure.
---

# Image

## Overview

Images display visual content such as photos, illustrations, logos, or previews. They help users recognize content quickly while preserving a reliable experience when loading is delayed or a source fails.

```tsx
<Image source="https://..." description="..." width={1920} height={1280} />
```

## Usage Guidelines

- **Write a clear descriptions:** Use `description` to convey the image's meaning in an accessible way. Keep it concise and focused on the image's content or purpose.
- **Keep image dimensions stable:** Provide `width` and `height` when possible, so the page layout remains stable as images load.
- **Use fallback intentionally:** Use `fallbackSource` when a reliable backup image exists, and `fallback` for intentional replacement UI such as an empty state or placeholder.

## API Reference

### `Image`

| Prop             | Type                                                            | Default     |
| ---------------- | --------------------------------------------------------------- | ----------- |
| `source`         | `string`                                                        | `undefined` |
| `fallbackSource` | `string`                                                        | `undefined` |
| `fallback`       | `ReactNode`                                                     | `undefined` |
| `onStatusChange` | `(status: "empty" \| "loading" \| "loaded" \| "error") => void` | `undefined` |
| `description`    | `string`                                                        | `undefined` |
| `draggable`      | `boolean`                                                       | `false`     |
| `onLoad`         | `(event: SyntheticEvent<HTMLImageElement>) => void`             | `undefined` |
| `onError`        | `(event: SyntheticEvent<HTMLImageElement>) => void`             | `undefined` |

## Examples

### Fallback

If an image fails to load, `<Image />` can display a fallback source or even an entire fallback component in place of the browser's default broken image icon.

```tsx
<Image source="..." fallback={<CustomComponent />} />
```