--- title: "Vega Image Component" slug: "vega-image-component" updated: 2025-09-26T04:57:42Z published: 2025-09-26T04:57:42Z canonical: "docs.unqork.io/vega-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. # Vega Image Component UDesignerClassic Designer ## Overview The **Vega Image component** lets you display images in your Front-End [modules](/v1/docs/what-is-a-module). With this [component](/v1/docs/module-builder-component-library), you can specify image dimensions, , or apply a custom CSS class. Use this component by specifying the URL of external image files, or image files stored in [Managed Assets](/v1/docs/managed-assets-administration). You can find the Vega Image component under the [Display & Layout](/v1/docs/display-layout-components) group to the left of the Module Builder. ## About the Configuration Window > To learn more about general component settings, view our [General Component Settings](/v1/docs/general-component-settings) article. ### Display Panel [![A static image displaying the Image component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Image_component_classic_SH_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Image%20component%20classic%20SH.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) #### Source | Setting | Description | | --- | --- | | **URL** | Enter the URL address of the image. For images stored in Managed Assets, enter the following: `{{data.getEnv.REMOTE_ROOT}}assets/`**[filePathAndName.jpg]**. Replace [filePathAndName.jpg] with the folder path and image file. For example, `{{data.getEnv.REMOTE_ROOT}}assets/application1/exampleLogo.jpg` Supported image formats include: - .avif (supports transparency and animation) - .gif (supports transparency and animation) - .jpg and .jpeg - .png (supports transparency) - .webp (supports transparency and animation) > [!NOTE] > Unsupported images formats do not display, but can still be accessed using `UNQENG.tools.getComponentState('propertyId')` | | **Alternative Text** | Provide a simple description of the image. produce an audio description of the alternate text when they reach the image. | #### Default State Options | Setting | Description | | --- | --- | | **Hide Field** | Shows or hides the component from view in Express View. Setting Hide Field to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) (ON) hides the component in Express View. Setting it to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) (OFF) shows the component. The component is always visible in the Module Builder. By default, Hide Field is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) (OFF). | | **Disable User Input** | Used to disable end-user inputs in Express View. By default, Disable User Input is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) (OFF). | #### Display Settings | Setting | Description | | --- | --- | | **Width** | The width of the image in pixels. Leave this field blank to use the image's original width. | | **Height** | The height of the image in pixels. Leave this field blank to use the image's original height. | ### Advanced Panel [![A static image displaying the Image component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Image_component_Advanced_Classic_SH_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Image%20component%20Advanced%20Classic%20SH.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) #### Additional Styling | Setting | Description | | --- | --- | | **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. | ### Accessibility Panel [![A static image displaying the accessibility settings configuration of the Image component in Classic Designer view.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Image_component_Accessibility_Classic_SH_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Image%20component%20Accessibility%20Classic%20SH.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) #### Accessibility | **Setting** | Description | | --- | --- | | **Hide From Screen Readers** | This setting is used to prevent from being announced by screen readers. It is mostly used for decorative or non-essential content. | | **Custom ARIA Attributes** | This is a long example of text in a description. This setting is used to enhance accessibility beyond the built-in settings. You can add ARIA attributes and their values to define how assistive technologies interpret your component. | ## Adding an Image Component To use an Image component, you must have a URL address for an image. For this example, use the following image URL: `https://docs.unqork.io/Content/Resources/Images/exampleLogo.jpg`. ### Configure the Image Component 1. In the Module Builder, drag and drop an **Image** component onto the canvas. 2. In the Property ID field, enter **imageLogo**. 3. In the **URL** field, enter `https://docs.unqork.io/Content/Resources/Images/exampleLogo.jpg`. 4. In the **Alternative Text** field, enter `A static image displaying the company logo.`. 5. Click **Save & Close**. 6. **Save** your module. **Preview** your module in Express View. The image displays at its original size. [![A static image displaying the Express View example of an Image component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Image_Component_ExpressView1_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Image%20Component%20ExpressView1.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) Inspect the image using your browser's DevTools to display the **Alternate Text** value in the alt attribute. [![A static image displaying the Express View example of an Image component, the DevTools console displays the alt attribute text.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Image_Component_ExpressView2_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Image%20Component%20ExpressView2.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) ## Overview The **Vega Image component** lets you display images in your Front-End [modules](/v1/docs/what-is-a-module). With this [component](/v1/docs/module-builder-component-library), you can specify image dimensions, , or apply a custom CSS class. Use this component by specifying the URL of external image files, or image files stored in [Managed Assets](/v1/docs/managed-assets-administration). You can find the Vega Image component under the [Display & Layout](/v1/docs/display-layout-components) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder). ## About the Configuration Window > To learn more about general component settings, view our [General Component Settings](/v1/docs/general-component-settings) article. ### Display Settings #### Default State Options [![A static image displaying the Image component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Image_Component_SH_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Image%20Component%20SH.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) | Setting | Description | | --- | --- | | **Hide Field** | Shows or hides the component from view in Express View. Setting Hide Field to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) (ON) hides the component in Express View. Setting it to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) (OFF) shows the component. The component is always visible in the Module Builder. By default, Hide Field is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) (OFF). | | **Disable User Input** | Used to disable end-user inputs in Express View. By default, Disable User Input is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) (OFF). | #### Source | Setting | Description | | --- | --- | | **URL** | Enter the URL address of the image. For images stored in Managed Assets, enter the following: `{{data.getEnv.REMOTE_ROOT}}assets/`[filePathAndName.jpg]. Replace **[filePathAndName.jpg]** with the folder path and image file. For example, `{{data.getEnv.REMOTE_ROOT}}assets/application1/exampleLogo.jpg` Supported image formats include: - .avif (supports transparency and animation) - .gif (supports transparency and animation) - .jpg and .jpeg - .png (supports transparency) - .webp (supports transparency and animation) > [!NOTE] > Unsupported images formats do not display, but can still be accessed using `UNQENG.tools.getComponentState('propertyId')` | | **Alternative Text** | Provide a simple description of the image. produce an audio description of the alternate text when they reach the image. | #### Display Settings | Setting | Description | | --- | --- | | **Width** | The width of the image in pixels. Leave this field blank to use the image's original width. | | **Height** | The height of the image in pixels. Leave this field blank to use the image's original height. | ### Advanced Settings #### Additional Styling [![A static image displaying the Image component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Image_Component_Advanced_SH_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Image%20Component%20Advanced%20SH.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) | Setting | Description | | --- | --- | | **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. | ## Adding an Image Component To use an Image component, you must have a URL address for an image. For this example, use the following image URL: https://docs.unqork.io/Content/Resources/Images/exampleLogo.jpg. ### Configure the Image Component 1. In the Module Builder, drag and drop an Image component onto the canvas. 2. In the Property ID field, enter **imageLogo**. 3. In the **URL** field, enter `https://docs.unqork.io/Content/Resources/Images/exampleLogo.jpg`. 4. In the **Alternative Text** field, enter `A static image displaying the company logo.`. 5. Click **Save Component**. 6. **Save** your module. **Preview** your module in Express View. The image displays at its original size. [![A static image displaying the Express View example of an Image component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Image_Component_ExpressView1_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Image%20Component%20ExpressView1.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) Inspect the image using your browser's DevTools to display the **Alternate Text** value in the alt attribute. [![A static image displaying the Express View example of an Image component, the DevTools console displays the alt attribute text.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Image_Component_ExpressView2_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Image%20Component%20ExpressView2.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) ## Structure of an Image Component's Data Using the example above, execute the [Vega Console](/v1/docs/vega-console) command `UNQENG.tools.getComponentState('imageLogo')` in the DevTools Console to display the component's data structure: [![A static image displaying the data structure of an Image component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Image_Component_DataStructure_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Image%20Component%20DataStructure.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) ## Resources - [Modify the Image component using the toolbar settings](/v1/docs/component-toolbar-settings). - [Upload images to your workspace in Managed Assets Administration](/v1/docs/managed-assets-administration). - [Manage CSS in Style Administration](/v1/docs/style-administration). - [Community: Convert images using Unqork](https://community.unqork.com/platform-q-a-10/is-there-a-way-to-convert-image-files-to-jpeg-13236?tid=13236&fid=10). - [Discover more about Vega](/v1/docs/welcome-to-vega). Cumulative Layout Shift (CLS) measures how much elements in a webpage shift while using it. Some search engines use the CLS metric to rate a website's accessibility in their search rankings. A URL (uniform resource locator) is a unique identifier used to locate a resource on the internet. Also known as a web address. Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View. 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 Property ID is the unique field ID used by Unqork to track and link components in your module. The DevTools Console helps you securely store, build, test, and deploy your software. The DevTools Console helps you securely store, build, test, and deploy your software.