Image

<esp-image>

A responsive image element.

Slots

<esp-image> has a slot:

Default

Place esp-image-option elements with the widths and urls of available versions of the image. When the image first loads, it will pick the esp-image-option with a width larger than the image client width. As the page is resized, it will respond by switching the displayed option to suit.

Attributes

<esp-image> has the following attributes:

original-height

original-height has a default value of 0.

The original height of the image; used to calculate the orientation of the image and set the element aspect ratio.

original-width

original-width has a default value of 0.

The original width of the image; used to calculate the orientation of the image and set the element aspect ratio.

low-res

low-res has a default value of "".

A low-res image URL for the image. This image is loaded first to prevent the screen from bouncing around.

local-image

local-image has a default value of "".

A local image URL (e.g. a blob: URL) that takes priority over responsive image selection. When set, pickBestImage() is skipped entirely and this URL is displayed as-is. Used during upload to show the user's local file immediately while CDN variants are generated in the background.

caption

caption has a default value of "".

A caption for the image. Used as the alt attribute on the internal <img> element for accessibility, and displayed as a visible caption in the esp-lightbox drawer.

CSS Properties

<esp-image> has the following CSS properties:

--esp-image-border

Set the border property of the image.

Where does this show?