You're currently browsing the Ignition 8.0 docs. Click here to view the latest docs.


General

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, SVGs, 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
External Images

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.

NameDescriptionProperty Type
source

The image source URL. It could be a URL to an image on the internet or Gateway, or even an embedded image. You can find images in the Image Management tool and copy their path for this source property. Format: /system/images/<imagepath> 

For example, the Builtin/icons/16/about.png image path would be /system/images/Builtin/icons/16/about.png

In addition, source can be set to a Base64 encoded image

value: string
altTextAn 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.

NameDescriptionProperty Type
modeCan be one of the following modes: none, fill, contain, cover, percent, or absolute.value: string dropdown
widthWidth of the image in pixels.value: numeric
heightHeight of the image in pixels.value: numeric
scrollIf false, scrolling is not enabled.value: boolean
object
tint

Enables you to tint the entire image a color.

NameDescriptionProperty Type
enabledTurn tint on (true) and off (false).value: boolean
colorIf the tint filter is on, this is the color of the tint. See Color Selector.color
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

Perspective Component Events

The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

Examples
Example 1

PropertyValue
props.source/system/images/Builtin/Flow/Flow 7.png
props.fit.modecontain
props.tint.enabled

true

props.tint.color#FFF00
position.width150
position.height115
Example 2

PropertyValueStyle Category
props.sourcehttps://inductiveautomation.com/static/images/logos/inductive-automation-logo.pngN/A
props.style.borderStylesolidborder
props.style.borderWidth1pxborder


  • No labels