# Image

An enhanced image component with loading states and optimization.

---

## Installation

```bash
npm install @cleartrip/ct-design-image
# or
pnpm add @cleartrip/ct-design-image
```

### Peer dependencies

```bash
# Required for all targets
npm install react

# Web only
npm install react-dom

# React Native only
npm install react-native
```

---

## Usage

### Basic

```tsx
import { Image } from '@cleartrip/ct-design-image';

function Example() {
  return (
    <Image>
      {/* Basic usage */}
    </Image>
  );
}
```

---

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `fallbackUrl` | `string` | — | No | URL to swap in when `src` fails to load. Also used as the initial |
| `onError` | `(e: SyntheticEvent<HTMLImageElement, Event>) => void` | — | No | Fired when the image fails to load. The fallback swap happens |
| `Component` | `ComponentType<IImageWebRendererProps>` | — | No | Optional custom renderer used in place of the default `<img>`. |
| `resizeMode` | `'contain' | 'cover' | 'stretch' | 'center'` | — | No | `react-native-fast-image` resize mode. Ignored on web. |

---

## Accessibility

- The component follows accessibility best practices
- Ensure proper ARIA attributes are provided where needed
- Test with screen readers to ensure usability

---

## Migration

If migrating from a previous version:

```diff
- import { Image } from 'yagami/core/components';
+ import { Image } from '@cleartrip/ct-design-image';
```