useImage

v0.0.15testeddemo

Reactively load an image in the browser; await the result to render it or show a fallback.

Examples

const { isLoading, error, state: image } = useImage({ src: '/cat.png' });

// Reactive source: reloads whenever `src` changes
const src = ref('/a.png');
const { state } = useImage(() => ({ src: src.value, alt: 'photo' }));

Demo

Loading demo…

Signature

export function useImage(
  options: MaybeRefOrGetter<UseImageOptions>,
  asyncStateOptions: UseImageAsyncStateOptions ={ ... }

Parameters

Parameter	Type	Default	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

UseAsyncStateReturn<HTMLImageElement | undefined, any[], true>`useAsyncState`-shaped `{ isLoading, isReady, error, state, execute, … }` for an `HTMLImageElement`