# useImage API

> Auto-generated API reference for `useImage` from @vuetify/v0 (Vuetify0).
> Source of truth: https://0.vuetifyjs.com/api/use-image

## Related

- https://0.vuetifyjs.com/composables/system/use-image
- https://0.vuetifyjs.com/composables/system/use-intersection-observer
- https://0.vuetifyjs.com/composables/system/use-lazy
- https://0.vuetifyjs.com/components/semantic/image
- https://0.vuetifyjs.com/components/semantic/avatar

## Functions

### useImage

Tracks image loading state as a reactive state machine.

```ts
(options: UseImageOptions) => UseImageReturn
```

## Options

| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| `src` | `MaybeRefOrGetter<string \| undefined>` | — | yes | Image source URL. Changes trigger a reload. |
| `eager` | `MaybeRefOrGetter<boolean> \| undefined` | `true` | no | Whether the image should load. When `false`, status stays `idle` and `source` resolves to `undefined` so the browser does not start loading. |

## Methods

| Name | Type | Description |
|---|---|---|
| `onLoad` | `(e?: Event) => void` | Bind to the `<img>` `load` event. |
| `onError` | `(e?: Event) => void` | Bind to the `<img>` `error` event. |
| `retry` | `() => void` | Reset status back to `loading` so the browser re-attempts the source. |

## Properties

| Name | Type | Description |
|---|---|---|
| `status` | `Readonly<ShallowRef<ImageStatus>>` | Current loading state. |
| `isIdle` | `Readonly<Ref<boolean, boolean>>` | Whether the image has not yet started loading (eager is false). |
| `isLoading` | `Readonly<Ref<boolean, boolean>>` | Whether the image is currently loading. |
| `isLoaded` | `Readonly<Ref<boolean, boolean>>` | Whether the image has loaded successfully. |
| `isError` | `Readonly<Ref<boolean, boolean>>` | Whether the image failed to load. |
| `source` | `Readonly<Ref<string \| undefined, string \| undefined>>` | Gated source URL. Resolves to `undefined` while idle, otherwise the current `src` value. Bind directly to the `<img>` `src` attribute. |