Image
An image from the asset library, the uploads folder or a bound URL. The source is bindable, so one component can show a different image per product, state or selection.
Reach for it when you need:
- Equipment photographs
- A product image driven by the current batch
Component name: Image · Category: Display
In the palette: Image element
Properties
Any property can be bound to a tag, another component's property, or a query.
| Property | Type | Default | Description |
|---|---|---|---|
src | asset | "" | Pick an image from the asset Library or the Uploads folder, or paste a URL / path. Bindable — e.g. bind a File Manager widget's {{ <name>.selectedItem.ref }} to show the file the operator picked. |
alt | string | Image | — |
width | string | 100% | — |
height | string | auto | — |
objectFit | enum | cover | Options: cover · contain · fill. |
aspectRatio | string | "" | Shape: 1 = square, 16/9, 4/3 (blank = fill the box) |
radius | string | "" | Corner radius: 50% = circle (with aspectRatio 1), or e.g. 8px |
style | style | {} | Custom CSS properties |
Events
Attach event actions to these in the Event Manager.
| Event | Label | Group | Payload |
|---|---|---|---|
click | Click | Mouse | The DOM event. |
dblclick | Double click | Mouse | The DOM event. |
contextmenu | Right click | Mouse | The DOM event. |
mouseenter | Mouse enter | Mouse | The DOM event. |
mouseleave | Mouse leave | Mouse | The DOM event. |
Right-click behaves differently in the Designer
contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.