The Image component displays an image from a configured URL. It supports optional width and height constraints and can be hidden conditionally.
How to read settings tables
The tables below describe each configurable option as it displays in the Unqork IDE. Values are formatted as follows:
inline code— a value to type exactly as shown | Bold — a value selected from a drop-down, radio button, tab, or choice chip | ON/OFF — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked
General Settings
| Setting | Field | Type | Default | Description |
|---|---|---|---|---|
| Property ID | key |
Text input | image |
The unique identifier for this component instance. |
Display Settings
| Setting | Field | Type | Default | Description |
|---|---|---|---|---|
| URL | sourceUrl |
Text input | — | The URL of the image to display. |
| Alternative Text | alternativeText |
Text input | — | A text description of the image for screen readers and when the image fails to load. |
| Width | size.width |
Number input | — | The display width of the image in pixels. Leave empty to use the image's natural width. |
| Height | size.height |
Number input | — | The display height of the image in pixels. Leave empty to use the image's natural height. |
| Hidden | hidden |
Toggle | OFF | Hides the image from end-users but always displays in the Module Builder. |
Advanced Settings
| Setting | Field | Type | Default | Description |
|---|---|---|---|---|
| custom CSS class | customClass |
Text input | — | A CSS class applied to the image for custom styling. |
Accessibility Settings
For details on each setting and when to use it, see Accessibility Settings Reference.
| Setting | Field | Type | Default | Description |
|---|---|---|---|---|
| Hide From screen readers | ariaHidden |
Toggle | OFF | Hides the image from assistive technologies. Use when the image is purely decorative. |
Custom ARIA Attributes
Adds additional custom ARIA attributes to the element as key-value pairs.
| Column | Field | Description |
|---|---|---|
| Attribute | key |
The ARIA attribute name (for example, aria-label, aria-describedby, and so on). |
| Value | value |
The value for the attribute. |
Operations Builder
This component supports the Operations Builder in Vega modules. When the module or panel runtime is set to Vega (2.0), an Event Handlers section displays in the settings panel for configuring event-driven operations.
Changelog
| Date | Change |
|---|---|
| — | Initial publication. |