image

A picture, such as a product photo. The quoted text says what it shows, and is displayed if the image can't load.

Spec · edit me

No problems. The parser accepted every line.

This example loads a photo from your app's own site, so it isn't drawn here. In your app, images load from your origin and the hosts you allow.

Tweak the props"text"src

ratio

fit

Props

"text"textWhat the image shows, e.g. Blue trail runners from the side.required

srcstringThe image URL. Only the app's own site and hosts it allows will load.required

ratio16:9 · 4:3 · 3:2 · 1:1 · 2:3 · 3:4Width to height: 16:9, 4:3, 3:2, 1:1, 2:3 or 3:4. The space is kept while the image loads.16:9

fitcover · containcover fills the space and crops the edges; contain shows the whole image.cover

ifconditionShow only when this expression is true, e.g. if=done or if={count>0}. Every element takes it.—

tipstringA short explanation shown on hover, keyboard focus or a tap, e.g. tip="Orders not yet shipped": for a term or a number some people won't know, instead of more words on screen. It makes the element a Tab stop if it isn't one. Every element takes it.—

For your model

The exact guide entry a model gets for image, generated from the same definition.

  image "<text>"  — A picture, such as a product photo. The quoted text says what it shows, and is displayed if the image can't load.
    "<text>" (required)  What the image shows, e.g. Blue trail runners from the side.
    src=<string, required>  The image URL. Only the app's own site and hosts it allows will load.
    ratio=<16:9|4:3|3:2|1:1|2:3|3:4>  Width to height: 16:9, 4:3, 3:2, 1:1, 2:3 or 3:4. The space is kept while the image loads.
    fit=<cover|contain>  cover fills the space and crops the edges; contain shows the whole image.
    example:
      image "Ridgeline trail runners, side view" src="/images/ridgeline.jpg" ratio=4:3