Image

alt

string

—

Accessible description of the image. Required for non-decorative images.

blurDataURL

string

—

Low-resolution image URL displayed while the main image loads when placeholder is Blur.

className

string

—

Additional CSS class name(s) applied to the underlying element.

darkSrc

string

—

Themed URL sources are not used in single URL mode. Themed URL sources are not used in single inline SVG mode. Image URL shown when the active theme is dark. Themed URL sources are not used in themed inline SVG mode.

darkSvg

ComponentType<SVGProps<SVGSVGElement>>

—

Themed inline SVG sources are not used in single URL mode. Themed inline SVG sources are not used in single inline SVG mode. Themed inline SVG sources are not used in themed URL mode. Inline SVG component shown when the active theme is dark.

fill

boolean

—

When true, the image fills its nearest positioned ancestor (omit width/height).

height

number

—

Intrinsic height in pixels; helps reserve layout space and avoid CLS.

id

string

—

Stable DOM id forwarded to the underlying element.

lightSrc

string

—

Themed URL sources are not used in single URL mode. Themed URL sources are not used in single inline SVG mode. Image URL shown when the active theme is light. Themed URL sources are not used in themed inline SVG mode.

lightSvg

ComponentType<SVGProps<SVGSVGElement>>

—

Themed inline SVG sources are not used in single URL mode. Themed inline SVG sources are not used in single inline SVG mode. Themed inline SVG sources are not used in themed URL mode. Inline SVG component shown when the active theme is light.

loading

ImageLoading

—

Native lazy/eager loading; defaults to ImageLoading.Lazy unless priority is true.

objectFit

ImageObjectFit

—

Maps to CSS object-fit via BEM modifier classes.

objectPosition

ImageObjectPosition

—

Maps to CSS object-position via BEM modifier classes.

onError

((event: SyntheticEvent<HTMLImageElement, Event>) => void) | ((event: SyntheticEvent<HTMLImageElement, Event>) => void)

—

Fired when the image fails to load. Fired when either theme variant fails to load.

onLoad

((event: SyntheticEvent<HTMLImageElement, Event>) => void) | ((event: SyntheticEvent<HTMLImageElement, Event>) => void)

—

Fired when the image finishes loading. Fired when either theme variant finishes loading.

placeholder

ImagePlaceholder

ImagePlaceholder.Empty ImagePlaceholder.Empty

Placeholder behavior while the image loads.

priority

boolean

—

When true, preloads the image with high fetch priority (eager loading).

ref

((instance: HTMLImageElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<HTMLImageElement | null> | ((instance: SVGSVGElement | null) => void | (() => VoidOrUndefinedOnly)) | RefObject<...> | null

—

React ref forwarded to the underlying <img> element. React ref forwarded to the underlying <svg> element.

sizes

string

—

Responsive image sizes hint forwarded to the native sizes attribute. Only has an effect alongside srcSet (or a sources entry) — on its own the browser has no candidates to choose between and ignores it. Responsive image sizes hint forwarded to the native sizes attribute.

sources

ImageSource[]

—

Alternate-format candidates offered ahead of src, rendered as <source> elements in a <picture>. Order is the priority order: the browser takes the first type it can decode, so list newest-first (AVIF → WebP) and keep src a universally supported fallback.

src

string

—

Image URL (static import, public path, or remote URL). Image URL source is not used in inline SVG mode. Single image URL is not used in themed URL mode. Single image URL is not used in themed inline SVG mode.

srcSet

string

—

Responsive candidate set forwarded to the native srcset attribute. Pair with sizes.

svg

ComponentType<SVGProps<SVGSVGElement>>

—

Trusted inline SVG component from a local ?react import. Single inline SVG is not used in themed URL mode. Single inline SVG is not used in themed inline SVG mode.

width

number

—

Intrinsic width in pixels; helps reserve layout space and avoid CLS.