How to Add Images

Type: How-to | Audience: End-user | Goal: Add static or dynamic images

Adding an Image Block

1. Hover the gap between two rows and click the + button to add a row (pick any layout in the Add row dialog).
2. Click an empty column inside the row, then pick Image in the Add block dialog.
3. Click the new block to open its settings in the sidebar.

Settings

The Image block has four fields in the Configuration sub-tab:

Setting	Description
Name	Internal name shown on the canvas block label and used in builder error messages. Does not appear in the rendered output.
Url	The image source. Paste a static URL or use the Data Picker to bind it to a data field (for example picture_url).
Width	Image width in pixels. Leave empty for auto (the image keeps its natural width, constrained by the column).
Height	Image height in pixels. Leave empty for auto.

Alt text is hard-coded

The rendered image always uses the alt text Picture, regardless of what the image actually shows. Screen reader users will not get a meaningful description.

If Url is empty or resolves to an empty string at render time, the <img> element still renders but with no src, which the browser shows as a broken-image placeholder. Bind a fallback through the Data Picker (for example useDefault(person.picture_url, variable.placeholder_avatar_url)) when the source field may be missing.

Style and Visibility

Open the block's Style sub-tab to add borders or round the corners:

• Top / Right / Bottom / Left Border -- enable any side and set its Width (px), Style (Solid / Dashed / Dotted), and Color.
• Border Radius (px) -- round the image corners; large values produce a circle.

The Image block has no font controls (it has no text) and no Background Color -- the Style sub-tab hides those rows. See Block Styles for the full set of controls.

The standard Visibility sub-tab is also available -- bind a condition to show or hide the image based on data. See Conditional Visibility.