Vega Image Component

Overview

The Vega Image component lets you display images in your Front-End modules. With this component, you can specify image dimensions, alternate text, or apply a custom CSS class. Use this component by specifying the URL of external image files, or image files stored in Managed Assets.

You can find the Vega Image component under the Display & Layout group to the left of the Module Builder.

About the Configuration Window

To learn more about general component settings, view our General Component Settings article.

Display Settings

Default State Options

A static image displaying the Image component's Display settings.

Setting

Description

Hide Field

Shows or hides the component from view in Express View. Setting Hide Field to  (ON) hides the component in Express View. Setting it to (OFF) shows the component. The component is always visible in the Module Builder.

By default, Hide Field is set to (OFF).

Disable User Input

Used to disable end-user inputs in Express View.

By default, Disable User Input is set to (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)

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. Screen Readers 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.

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.

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.

 

Structure of an Image Component's Data

Using the example above, execute the 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.

Resources