Image

The Image component allows you to use images in your apps.

Example

You can use the Image component to add the Unit 4 logo to your app.

Image component

Note: The Image component follows the WCAG 2.0 AA accessibility guidelines.

The following Image component properties are available:

The following table describes the main properties of the component.

Property	Description	Required
Component ID	Enter a unique name for the component. See Templating in components for more details.	Yes
Image source	Enter the image URL or the base64 image code.	Yes

Note: See Templating drop-down for more details on rendering dynamic content using Liquid.

The following table describes the styles properties of the component.

Property	Description	Required
Use original size	Select to use the original width and height of the image.	No
Responsive	Select to maintain the original image ratio. It overrides the Height property.	No
Height	Enter the height in pixels. The default value is set to 250.	No
Width	Enter the width in pixels. The default value is set to 250.	No

The following table describes the interactions properties of the component.

Property	Description	Required
Hidden	Select the checkbox to hide the component in the end-user app. To hide it in the canvas, use the eye icon in the Layers panel.	No
Add rule	You can set rules to hide the component using Liquid. If no rules are set, the component will be hidden in all instances.	No

Note: See Add rules to trigger properties for more information on setting rules to these properties.

The following table describes the accessibility properties of the component.

Property	Description	Required
Alt	Enter a text that allows assistive technology to attach a label to the component.	Yes
Title	Enter a text that is displayed as a tooltip when hovering the mouse over the component in the end-user app.	No