Image¶
The Image widget shows a picture from a web address: your logo in a header, an illustration on a landing page, or a photo that changes per record, such as a product picture in each row of a list.
Using it¶
Drop an Image onto the page and set Source to the picture's address. Use the folder button next to the field to pick a file uploaded to the workspace, or type a web address. Fill in Alternate text with a short description for screen readers. Set Width and Height to control the size, and Image fit to decide how the picture scales inside that size.
Examples¶
A picture per record
{$record.avatarUrl}Options¶
| Option | Values | Default | Description |
|---|---|---|---|
| Source | A web address, a path or a template, e.g. https://... or /path/{$params.x} |
A sample image | Where the picture comes from. The folder button picks an image from the workspace files. Empty shows a placeholder in the designer |
| Alternate text | Any text or template | Empty | A description read out by screen readers |
| Loading | Eager or Lazy | Eager | Lazy waits to load the picture until it is about to scroll into view |
| Width / Height | Any CSS unit | 100% / 100% | The size of the picture itself |
| Image fit | Fill, Cover, Contain, None, Scale Down | Fill | How the picture scales inside its width and height. Available only when both Width and Height are set |
| Image Style | CSS | Empty | Any other styling for the picture |
| Box Style | Sizing and spacing | Height 100px | The box around the picture |
Tips¶
Two small things that help.
- Set Loading to Lazy for pictures far down a long page. The page loads faster.
- Alternate text accepts templates too, so a picture that changes per record can carry a matching description.