ResponsiveImageProps

Props accepted by the ResponsiveImage component.

Index

Properties

• alt
• background
• className
• image
• lazyRoot
• lazyRootMargin
• sizes
• variation

Properties

optionalalt

alt?: string

Alternate text description of the image. If set and the given image is a Starlight media object, it will be used in place of the image’s alternative text set in Starlight.

optionalbackground

background?: string

Defines the background color of the image while it loads. It accepts any CSS color, including transparent. Defaults to the color generated by Starlight when the image was uploaded, or transparent when the given image is a URI string.

optionalclassName

className?: string

image

image: string | MediaObject

The image to render. It should be a URI string or the object returned by Starlight on a Media File field. Required.

optionallazyRoot

lazyRoot?: null | RefObject<HTMLElement>

Defines the scrollable parent of the image. Set this to the nearest scrollable HTMLElement parent of this image if lazy-loading is not working. See the MDN documentation on IntersectionObserver.root to learn more.

optionallazyRootMargin

lazyRootMargin?: string

Defines how close to the viewport an image has to be to start loading. See the MDN documentation on IntersectionObserver.rootMargin to learn more. Defaults to 200px.

optionalsizes

sizes?: string

An HTML

<img>

sizes attribute. If provided, the browser will render the best fit image size variation to the current viewport size. See the MDN documentation on the sizes property to learn how to configure this attribute.

optionalvariation

variation?: string

Defines which image variation will be rendered. Defaults to optimized.