Image

Displays an image with optional sizing, alt text, and a caption.

ctx.ui.display.image({ url, alt, size, caption });

Config

The URL of the image to display.

Alternative text for the image, used for accessibility and in case the image fails to load.

Optional size preset to control the image’s display size. Defaults to natural size if not specified.

Optional caption to display below the image.

Identifies the element so a page's visibility rule can target it. Not shown in the UI. See Conditional visibility.

Usage

Use image elements to visually enhance pages with diagrams, photos, or illustrations.

ctx.ui.page({
  title: "Image example",
  content: [
    ctx.ui.display.image({
      url: "https://example.com/chart.png",
      alt: "Chart showing sales trends",
      size: "medium",
      caption: "Sales trends over the past 6 months",
    }),
  ],
});