Vuetify0 is now in alpha! See the roadmap for details.

Theme

Mode

Palettes

Accessibility

Image API

API reference for the Image components.

Explore these related pages for additional context and usage patterns.

Page	Category
Image	Semantic
useImage	System
Avatar	Semantic
useIntersectionObserver	System

Image.Root

Props

src

string | undefined

Image source URL. Forwarded to Image.Img via context.

lazy

boolean | undefined

Defer loading until the root element intersects the viewport.

Default: false

rootMargin

string | undefined

IntersectionObserver root margin. Only used when lazy is true.

Default: "0px"

threshold

number | number[] | undefined

IntersectionObserver threshold(s). A number or array of numbers between 0.0 and 1.0 indicating the percentage of the target's visibility required to trigger the observer. Only used when lazy is true.

Default: 0

root

Element | null | undefined

IntersectionObserver root element. If omitted, the viewport is used. Pass a scroll container to observe intersections relative to it instead. Only used when lazy is true.

Default: null

namespace

string | undefined

Namespace for dependency injection.

Default: "v0:image"

Slots

default

ImageRootSlotProps

Image.Fallback

Props

namespace

string | undefined

Namespace for retrieving the Image context.

Default: "v0:image"

Slots

default

ImageFallbackSlotProps

Image.Img

Props

alt

string | undefined

Accessible alt text.

srcset

string | undefined

Responsive image candidates.

sizes

string | undefined

Image sizes hint for responsive selection.

width

string | number | undefined

Intrinsic image width — set to prevent layout shift.

height

string | number | undefined

Intrinsic image height — set to prevent layout shift.

crossorigin

"" | "anonymous" | "use-credentials" | undefined

CORS request mode.

referrerpolicy

string | undefined

Referrer policy for the request.

decoding

"sync" | "async" | "auto" | undefined

How the browser should decode the image.

Default: "async"

loading

"eager" | "lazy" | undefined

Native browser-managed lazy loading hint.

fetchpriority

"auto" | "high" | "low" | undefined

Resource priority hint.

namespace

string | undefined

Namespace for retrieving the Image context.

Default: "v0:image"

Events

load

[e: Event]

error

[e: Event]

loadstart

[src: string]

Slots

default

ImageImgSlotProps

Image.Placeholder

Props

namespace

string | undefined

Namespace for retrieving the Image context.

Default: "v0:image"

Slots

default

ImagePlaceholderSlotProps

Was this page helpful?