Perspective - Image

Component Palette Icon:

Description

The Image component displays either vector or raster format images, such as a jpeg, gif, png, or svg. For examples see Images and Icons in Perspective.

When attempting to show images from the Image Management Tool on this component, you'll need to prefix /system/images/ to the path. For example:

/system/images/Builtin/icons/48/about.png

The Image component can also be used to show external images stored relative to the local file system on the client. The file path is similar to having your browser view a local document.

Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective. This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

Name	Description	Property Type
source	The image source URL. It can be a URL to an image on the internet or Gateway, or even an embedded image. If you use images in the Image Management tool, simply copy their path for this source property, using the format /system/images/<imagepath>. For example, the Builtin/icons/16/about.png image path would be /system/images/Builtin/icons/16/about.png Additionally, the source can be set to a Base64 encoded image.	value: string
altText	An alternate text for the image if the image cannot be displayed because of a slow connection, an error in the source attribute, if the user uses a screen reader, or some other reason.	value: string
fit	Whether or not the image will size to fit. When in percent mode, the parameters are used to fit based on the percentage of the width and height. When in absolute mode, the image will fit the width and height sizes in pixels. mode: Can be one of the following modes: none, fill, contain, cover, percent, or absolute. Value is string. width: Width of the image in pixels. Value is numeric. height: Height of the image in pixels. Value is numeric. scroll: If false, scrolling is not enabled. Value is boolean.	object
tint	Enables you to tint the entire image a color. enabled: Turn tint on (true) and off (false). Value is boolean. color: If the tint filter is on, this is the color of the tint. See Color Selector.	object
style	Sets a style for this component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. Classes are predefined styles in a project.	object

Component Scripts and Events

Further component interaction and functionality can be configured for all components through scripting and event actions. Right-click on the component or select Components from the Designer menubar to access the configuration popups for both of these options:

• Configure Events: Accesses the Event Configuration popup where you can configure actions to run in response to events to make the component dynamic. The Events Configurations page shows how to configure events and actions on a Perspective component.

• Configure Scripts: Accesses the Script Configuration popup where custom methods and message handlers can be added. The Scripting in Perspective section details scripting fundamentals, creating custom methods, and using message handlers.

Examples

Example 1

Property	Value
props.source	/system/images/Builtin/Flow/Flow 7.png
props.fit.mode	contain
props.tint.enabled	true
props.tint.color	#FFF00
position.width	150
position.height	115

Example 2

Property	Value	Style Category
props.source	https://inductiveautomation.com/static/images/logos/inductive-automation-logo.png	N/A
props.style.borderStyle	solid	border
props.style.borderWidth	1px	border