## 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 `{{person.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`. |

:::caution[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](/docs/buttons/interface-button/interface-builder/reference/styles/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](/docs/buttons/interface-button/interface-builder/how-to/visibility/conditional-visibility).