1---
2category: Browser
3---
4 
5# useImage
6 
7Reactive load an image in the browser, you can wait the result to display it or show a fallback.
8 
9## Usage
10 
11```vue
12<script setup lang="ts">
13import { useImage } from '@vueuse/core'
14 
15const avatarUrl = 'https://place.dog/300/200'
16const { isLoading } = useImage({ src: avatarUrl })
17</script>
18 
19<template>
20  <span v-if="isLoading">Loading</span>
21  <img v-else :src="avatarUrl">
22</template>
23```
24 
25## Component Usage
26 
27```vue
28<template>
29  <UseImage src="https://place.dog/300/200">
30    <template #loading>
31      Loading..
32    </template>
33 
34    <template #error>
35      Failed
36    </template>
37  </UseImage>
38</template>
39```
40 
41## Type Declarations
42 
43```ts
44export interface UseImageOptions {
45  /** Address of the resource */
46  src: string
47  /** Images to use in different situations, e.g., high-resolution displays, small monitors, etc. */
48  srcset?: string
49  /** Image sizes for different page layouts */
50  sizes?: string
51  /** Image alternative information */
52  alt?: string
53  /** Image classes */
54  class?: string
55  /** Image loading */
56  loading?: HTMLImageElement["loading"]
57  /** Image CORS settings */
58  crossorigin?: string
59  /** Referrer policy for fetch https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy */
60  referrerPolicy?: HTMLImageElement["referrerPolicy"]
61  /** Image width */
62  width?: HTMLImageElement["width"]
63  /** Image height */
64  height?: HTMLImageElement["height"]
65  /** https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding */
66  decoding?: HTMLImageElement["decoding"]
67  /** Provides a hint of the relative priority to use when fetching the image */
68  fetchPriority?: HTMLImageElement["fetchPriority"]
69  /** Provides a hint of the importance of the image */
70  ismap?: HTMLImageElement["isMap"]
71  /** The partial URL (starting with #) of an image map associated with the element */
72  usemap?: HTMLImageElement["useMap"]
73}
74export type UseImageReturn = UseAsyncStateReturn<
75  HTMLImageElement | undefined,
76  any[],
77  true
78>
79/**
80 * Reactive load an image in the browser, you can wait the result to display it or show a fallback.
81 *
82 * @see https://vueuse.org/useImage
83 * @param options Image attributes, as used in the <img> tag
84 * @param asyncStateOptions
85 */
86export declare function useImage<Shallow extends true>(
87  options: MaybeRefOrGetter<UseImageOptions>,
88  asyncStateOptions?: UseAsyncStateOptions<Shallow>,
89): UseImageReturn
90```
91