Image

Media

Image; alt is required for accessibility (rule A01). Given an image the program declares, it becomes a <picture> with every width the build wrote.

Image(source, src: …, sizes: …, placeholder: …)

Example

Image(src: "/team.jpg", alt: "The team at the launch", width: 1200, height: 630) Image(src: "/flourish.svg", alt: "")

Renders with the class wf-image, stable across releases, so a stylesheet may target it.

Props of Image
Prop Type Meaning
source Any (positional)

An image the program declares, or a URL

src: String

Image URL

sizes: String

How wide it will be shown, so the browser picks a width: (max-width: 768px) 100vw, 1200px

placeholder: .blur .color .none

What fills the box while the image loads

alt: String

Text alternative; empty for a purely decorative image

width: Number

Intrinsic width

height: Number

Intrinsic height

loading: .lazy .eager

Unset, the first image on a page is eager at high priority and the rest lazy

shape: .rounded .circle

Shape

Attribute families: global, aria, data. Plus the universal props on every element: animate:, exit:, speed:, class:, ref:.