fn
useImage
v0.0.14testeddemoReactively load an image in the browser; await the result to render it or show a fallback.
Examples
ts
const { isLoading, error, state: image } = useImage({ src: '/cat.png' });ts
// Reactive source: reloads whenever `src` changes
const src = ref('/a.png');
const { state } = useImage(() => ({ src: src.value, alt: 'photo' }));Demo
Loading demo…
Signature
ts
export function useImage(
options: MaybeRefOrGetter<UseImageOptions>,
asyncStateOptions: UseImageAsyncStateOptions ={ ... }Parameters
| Parameter | Type | Description |
|---|---|---|
options | MaybeRefOrGetter<UseImageOptions> | Image attributes (as used on the <img> tag); pass a ref/getter to reload reactively |
asyncStateOptions? | UseImageAsyncStateOptions | useAsyncState options (delay, immediate, onError, …) plus a configurable window |
Returns
UseImageReturnuseAsyncState-shaped { isLoading, isReady, error, state, execute, … } for an HTMLImageElement