Image

Displays an image and makes it clickable if needed.

Data binding

Set or modify the data binding for the view in the General properties tab. The Image view can be bound to a String variable which contains the location of the image to be displayed by the view. Typically, you bind the view to an image stored as a web file and the URL is a relative path to retrieve the file from the server. When you bind the view to a variable, the variable must contain a URL that is resolvable on the server.

Tip: Absolute URLs are acceptable, however, relative URLs are generally a better choice in order to avoid potential security warnings.

You can use the binding to specify the image. If no binding is specified, the Default image URL configuration property is used. To set a different image for different screen sizes, you must use theDefault image URL configuration property.

Configuration properties

Under Configuration, set or modify the appearance and behavior properties for the view.

Screen size: A configuration property that has the Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value. If you are using the Process Designer desktop editor (deprecated), you are setting the value for the large screen size. The other screen sizes inherit this value.

Theme definitions: Theme definitions specify the colors and styles for a view and determine its appearance. You can preview the look and feel of views in the theme editor. See Themes.

The appearance configuration properties for the Image view are shown in the following table:

Table 1. Appearance configuration properties for Image
Appearance configuration property	Description	Data type
Border radius	Specifies the radius of the curvature for an image. You can make an image perfectly round by setting it to at least half of the width specified for the Width property. By default, no border radius is specified.	`String`
Width	Specifies the width of an image in pixels, percent, or em units. For example: `50px` or `20%` or `0.4em`. If only a number is specified without any unit, the number is interpreted as the number of pixels. By default, no width is specified.	`String`
Height	Specifies the height of an image in pixels or em units. For example: `50px` or `0.4em`. If only a number is specified without any unit, the number is interpreted as the number of pixels. By default, no height is specified.

The behavior configuration properties for the Image view are shown in the following table:

Table 2. Behavior configuration properties for Image
Behavior configuration property	Description	Data type
Prevent multiple clicks	Prevents a user from clicking an image more than once when the on click event is programmed. By default, this property is not selected.	`Boolean`
Image URL type	The type of the image URL. Web External Note: Use External for images that are not hosted on the local server.
Image app acronym	The acronym of the process app or toolkit that contains the image. By default, the acronym of the current process app is used.
Default image URL	If the view is not bound, this URL is used. To set a different image for different screen sizes, you must use this property. To use an image, you must upload it to IBM® Process Designer. See Adding managed files
Default image URL type	If the view is not bound, this URL type is used. Web External Note: Use External for images that are not hosted on the local server.
Default image app acronym	The default acronym of the process app or toolkit that contains the image. By default, the acronym of the current process app is used. If the view is not bound to any data, the acronym that is specified here is used.

Example

Upload the image that you want to use to Process Designer. See Adding managed files.

In this example, the Image view is inside a Vertical Layout view, which is inside a Well view. The example uses the following configuration options:

Image URL type is Web.
Default image URL is magnolia.gif.
Default image URL type is Web.
Label position is Bottom.
Border radius is 50px.
Width is 300px.

At run time, you see the following:

Image of a gear icon

Events

Set or modify the event handlers for the view in the Events properties. You can set events to be triggered programmatically or when a user interacts with the view. For information about how to define and code events, see User-defined events.

The Image view has the following types of event handlers:

On load: Activated when the page loads. For example:
console.log("Img1 successfully loaded")
On click: Activated when an image is clicked, before navigating away from the page. If the evaluated expression returns false, the click does not fire a boundary event. For example:
return ${Text1}.isValid();

Methods

For detailed information on the available methods for Image, see the Image JavaScript API.

Additional resources

For information about how to create a coach or page, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see View properties.