---
title: "Image Component"
slug: "image-component"
tags: ["module-builder", "vega", "module-builder-components"]
updated: 2026-09-15T18:03:40Z
published: 2026-09-15T18:03:40Z
canonical: "docs.unqork.io/image-component"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Image Component

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 UnqorkAI platform. 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](/unqorkai/docs/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](/unqorkai/docs/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. |

A URL (uniform resource locator) is a unique identifier used to locate a resource on the internet. Also known as a web address.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Assistive technology that reads digital text aloud for users with visual impairments or reading disabilities.

The Number data type accepts integer or floating point values. The number data type does not use quotes around numerical values.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.

ARIA (Accessible Rich Internet Applications) is a set of attributes used in HTML to enhance the accessibility of web content, particularly dynamic or interactive web pages, for users who rely on assistive technologies like screen readers.

A key-value pair is a fundamental data structure where a unique "key" is associated with a specific "value," used for organizing and retrieving data efficiently, like in dictionaries or databases.

The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience.

The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience.