aeria-picture

This component provides a basic wrapper with basic styling and utilities for displaying images.

Example

<aeria-picture
  width="12rem"
  height="12rem"
  url="/assets/logo.png"
  alt="Aeria Logo"
></aeria-picture>

Props

• url string?: The absolute or relative URL of the image (the same as modelValue).
• alt string: Alternative text to display when image can't be displayed.
• bordered boolean?: Put the default border around the picture.
• objectFit boolean?: Sets the CSS object-fit property of the image.
• width boolean?: Image width, as in CSS.
• height boolean?: Image height, as in CSS.
• expandable boolean?: This property will make the picture expand upon clicked showing it's metadata when available.
• meta object?: The metadata of the image.

Slots

• default: A fallback to be rendered in case the image is absent.
• caption: Put a caption text beneath the image.