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.