Skip to content
On this page

useImage

Category
Export Size
1.24 kB
Last Changed
last month

Reactive load an image in the browser, you can wait the result to display it or show a fallback.

Demo

Loading...

Usage

<script setup>
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>
<script setup>
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

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

<template>
  <UseImage src="https://place.dog/300/200">
    <template #loading>
      Loading..
    </template>

    <template #error>
      Failed
    </template>
  </UseImage>
</template>
<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
}
/**
 * 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 const useImage: <Shallow extends true>(
  options: MaybeComputedRef<UseImageOptions>,
  asyncStateOptions?: UseAsyncStateOptions<Shallow>
) => UseAsyncStateReturn<HTMLImageElement | undefined, true>
export declare type UseImageReturn = ReturnType<typeof useImage>
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
}
/**
 * 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 const useImage: <Shallow extends true>(
  options: MaybeComputedRef<UseImageOptions>,
  asyncStateOptions?: UseAsyncStateOptions<Shallow>
) => UseAsyncStateReturn<HTMLImageElement | undefined, true>
export declare type UseImageReturn = ReturnType<typeof useImage>

Source

SourceDemoDocs

Contributors

Jelf
Anthony Fu
Lúcio Rubens

Changelog

v8.9.2 on 7/12/2022
24ede - fix(useAsyncState)!: rename type AsyncStateOptions to UseAsyncStateOptions (#1809)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
v8.7.0 on 6/16/2022
f4b37 - feat: new function (#1460)

Released under the MIT License.