# Image

Image with a placeholder while it loads, a fallback when it fails, and aspect-ratio handling so your layout doesn’t jump when the picture arrives.

> Primitive · Free · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add image
```

## Import

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

## Variants

- `fallback` — Fallback: `npx @lumioui/cli add image-fallback`
- `photo` — Photo: `npx @lumioui/cli add image-photo`
- `rounded` — Rounded: `npx @lumioui/cli add image-rounded`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `rounded?` | `"none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"` | Corner radius preset. |
| `aspectRatio?` | `number` | width / height ratio applied via style. |
| `fallback?` | `React.ReactNode` | Slot rendered when the image fails to load. |
| `hidePlaceholder?` | `boolean` | Hide the loading placeholder. Default false. |
| `alt?` | `string` | Alt text for the image — alias for `accessibilityLabel`. When neither is provided the label is left unset so the OS can decide what to announce. |
| `className?` | `string` | — |
| `style?` | `RNImageProps["style"]` | — |

Source: https://lumioui.com/components/image