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.