Picture

React component for a picture with a responsive width and proportionate height, even while loading. It’s displayed as a block and tends to take up 100% of the available space unless an inline style width is set.

GitHub icon Module source

Unpkg icon Unpkg CDN

CSS

This component module has a css export that’s a Set instance containing the URL strings of the CSS files that must be loaded for this component to display correctly (excluding theme and global CSS).

Props

The React component props are documented via TypeScript JSDoc comments in the module source.

Examples

A picture with an SVG source.

Device Agnostic UI logo.

Code

A picture with WebP and PNG sources.

Device Agnostic UI logo.

Code

A picture with separate light and dark mode WebP and PNG sources.

Blockquote component screenshot

Code

A circular picture.

Device Agnostic UI logo.

Code