fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
2.4 KiB
2.4 KiB
category
| category |
|---|
| Browser |
useImage
Reactive load an image in the browser, you can wait the result to display it or show a fallback.
Usage
<script setup lang="ts">
import { useImage } from '@vueuse/core';
const avatarUrl = 'https://place.dog/300/200';
const { isLoading } = useImage({ src: avatarUrl });
</script>
<template>
<span v-if="isLoading">Loading</span>
<img v-else :src="avatarUrl" />
</template>
Component Usage
<template>
<UseImage src="https://place.dog/300/200">
<template #loading> Loading.. </template>
<template #error> Failed </template>
</UseImage>
</template>
Type Declarations
export interface UseImageOptions {
/** Address of the resource */
src: string;
/** Images to use in different situations, e.g., high-resolution displays, small monitors, etc. */
srcset?: string;
/** Image sizes for different page layouts */
sizes?: string;
/** Image alternative information */
alt?: string;
/** Image classes */
class?: string;
/** Image loading */
loading?: HTMLImageElement['loading'];
/** Image CORS settings */
crossorigin?: string;
/** Referrer policy for fetch https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy */
referrerPolicy?: HTMLImageElement['referrerPolicy'];
/** Image width */
width?: HTMLImageElement['width'];
/** Image height */
height?: HTMLImageElement['height'];
/** https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding */
decoding?: HTMLImageElement['decoding'];
/** Provides a hint of the relative priority to use when fetching the image */
fetchPriority?: HTMLImageElement['fetchPriority'];
/** Provides a hint of the importance of the image */
ismap?: HTMLImageElement['isMap'];
/** The partial URL (starting with #) of an image map associated with the element */
usemap?: HTMLImageElement['useMap'];
}
/**
* Reactive load an image in the browser, you can wait the result to display it or show a fallback.
*
* @see https://vueuse.org/useImage
* @param options Image attributes, as used in the <img> tag
* @param asyncStateOptions
*/
export declare function useImage<Shallow extends true>(
options: MaybeRefOrGetter<UseImageOptions>,
asyncStateOptions?: UseAsyncStateOptions<Shallow>,
): UseAsyncStateReturn<HTMLImageElement | undefined, any[], true>;
export type UseImageReturn = ReturnType<typeof useImage>;