Skip to main content
Version: 8.1

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.

NameDescriptionProperty Type
sourceThe 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
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
fitWhether 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
    tintEnables 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
    styleSets 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 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.enabledtrue
    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