useImage

Category

Browser

Export Size

709 B

Last Changed

5 days ago

Reactive load an image in the browser

Demo

Usage

import { useImage } from '@reause/core'

const avatarUrl = 'https://place.dog/300/200'
const { isLoading } = useImage({ src: avatarUrl })

const { isLoading, error, url } = useImage({ src: avatarUrl })

if (isLoading)
  return <span>Loading...</span>

if (error)
  return <span>Failed to load image</span>

return <img src={url} alt="avatar" />

Type Declarations

Toggle

export interface UseImageOptions {
    src: string;
    srcset?: string;
    sizes?: string;
    alt?: string;
    class?: string;
    loading?: HTMLImageElement['loading'];
    crossorigin?: string;
    referrerPolicy?: HTMLImageElement['referrerPolicy'];
    width?: HTMLImageElement['width'];
    height?: HTMLImageElement['height'];
    decoding?: HTMLImageElement['decoding'];
    fetchPriority?: HTMLImageElement['fetchPriority'];
    ismap?: HTMLImageElement['isMap'];
    usemap?: HTMLImageElement['useMap'];
}

export interface UseImageAsyncStateOptions {
    delay?: number;
    immediate?: boolean;
    onError?: (e: unknown) => void;
    onSuccess?: (data: HTMLImageElement) => void;
    resetOnExecute?: boolean;
    throwError?: boolean;
}

export interface UseImageReturn {
    isLoaded: boolean;
    error: unknown;
    url: string | null;
    isLoading: boolean;
    execute: (delay?: number) => Promise<HTMLImageElement | undefined>;
}

export function useImage(options: UseImageOptions, asyncStateOptions?: UseImageAsyncStateOptions): UseImageReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

e608a - feat(ci): align CI, packaging and release with VueUse

cbe29 - fix(core): resolve useImage audit findings (#582)