📄 `useImage`¶

📊 Analysis Summary¶

Metric	Count
🔧 Functions	2
📦 Imports	6
⚡ Async/Await Patterns	1
🟢 Vue Composition API	1
📐 Interfaces	1
📑 Type Aliases	1

📚 Table of Contents¶

Imports
Async/Await Patterns
Vue Composition API
Functions
Interfaces
Type Aliases

🛠️ File Location:¶

📂 packages/core/useImage/index.ts

📦 Imports¶

Name	Source
`MaybeRefOrGetter`	`vue`
`UseAsyncStateOptions`	`../useAsyncState`
`UseAsyncStateReturn`	`../useAsyncState`
`toValue`	`vue`
`watch`	`vue`
`useAsyncState`	`../useAsyncState`

Async/Await Patterns¶

Type	Function	Await Expressions	Promise Chains
async-function	`loadImage`	none	new Promise(...)

Vue Composition API¶

Name	Type	Reactive Variables	Composables
`watch`	watch	none	none

Functions¶

`useImage(options: MaybeRefOrGetter<UseImageOptions>, asyncStateOptions: UseAsyncStateOptions<Shallow>): UseImageReturn`¶

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

Parameters:

options any: Image attributes, as used in the tag
asyncStateOptions any: No description

See: https://vueuse.org/useImage

Raw JSDoc

/**
 * 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
 */

Calls:

useAsyncState (from ../useAsyncState)
loadImage
toValue (from vue)
watch (from vue)
state.execute

Code

export function useImage<Shallow extends true>(options: MaybeRefOrGetter<UseImageOptions>, asyncStateOptions: UseAsyncStateOptions<Shallow> = {}): UseImageReturn {
  const state = useAsyncState<HTMLImageElement | undefined>(
    () => loadImage(toValue(options)),
    undefined,
    {
      resetOnExecute: true,
      ...asyncStateOptions,
    },
  )

  watch(
    () => toValue(options),
    () => state.execute(asyncStateOptions.delay),
    { deep: true },
  )

  return state
}

`loadImage(options: UseImageOptions): Promise<HTMLImageElement>`¶

Parameters:

options UseImageOptions

Returns: Promise<HTMLImageElement>

Calls:

resolve

Code

async function loadImage(options: UseImageOptions): Promise<HTMLImageElement> {
  return new Promise((resolve, reject) => {
    const img = new Image()
    const { src, srcset, sizes, class: clazz, loading, crossorigin, referrerPolicy, width, height, decoding, fetchPriority, ismap, usemap } = options

    img.src = src

    if (srcset != null)
      img.srcset = srcset
    if (sizes != null)
      img.sizes = sizes
    if (clazz != null)
      img.className = clazz
    if (loading != null)
      img.loading = loading
    if (crossorigin != null)
      img.crossOrigin = crossorigin
    if (referrerPolicy != null)
      img.referrerPolicy = referrerPolicy
    if (width != null)
      img.width = width
    if (height != null)
      img.height = height
    if (decoding != null)
      img.decoding = decoding
    if (fetchPriority != null)
      img.fetchPriority = fetchPriority
    if (ismap != null)
      img.isMap = ismap
    if (usemap != null)
      img.useMap = usemap

    img.onload = () => resolve(img)
    img.onerror = reject
  })
}

Interfaces¶

`UseImageOptions`¶

Interface Code

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']
}

Properties¶

Name	Type	Optional	Description
`src`	`string`	✗	not shown
`srcset`	`string`	✓	not shown
`sizes`	`string`	✓	not shown
`alt`	`string`	✓	not shown
`class`	`string`	✓	not shown
`loading`	`HTMLImageElement['loading']`	✓	not shown
`crossorigin`	`string`	✓	not shown
`referrerPolicy`	`HTMLImageElement['referrerPolicy']`	✓	not shown
`width`	`HTMLImageElement['width']`	✓	not shown
`height`	`HTMLImageElement['height']`	✓	not shown
`decoding`	`HTMLImageElement['decoding']`	✓	not shown
`fetchPriority`	`HTMLImageElement['fetchPriority']`	✓	not shown
`ismap`	`HTMLImageElement['isMap']`	✓	not shown
`usemap`	`HTMLImageElement['useMap']`	✓	not shown

Type Aliases¶

`UseImageReturn`¶

type UseImageReturn = UseAsyncStateReturn<HTMLImageElement | undefined, any[], true>;

Generated by Syntax Scribe

📄 useImage¶