Components

interactive-image

4min

An interactive image has clickable links that can be used in various ways. For instance, it can be clicked on to reveal information about a specific point, indicate a selection, such as a booking, or use it as a multi-selection. This is typically used when the information you need to convey is better presented visually than in text.

Interactive images
Interactive images


Configuration options



Core structure



source

The image source can be a remote URL or a local file resource. This property can also contain several remote URLs, specified with their width and height and potentially with scale/other URI arguments. The native side will then choose the best uri to display based on the measured size of the image container. The currently supported formats are png, jpg, jpeg, bmp, gif, webp (Android only), psd (iOS only).

body

The HTTP body to send with the request. This must be a valid UTF-8 string, and will be sent exactly as specified, with no additional encoding (e.g. URL-escaping or base64) applied.

bundle

The iOS asset bundle which the image is included in. This will default to [NSBundle mainBundle] if not set.

cache

A cache property can be added to control how networked requests interact with the local cache.

  • default: Use the native platforms default strategy. useProtocolCachePolicy on iOS.
  • force-cache: The existing cached data will be used to satisfy the request, regardless of its age or expiration date. If there is no existing data in the cache corresponding the request, the data is loaded from the originating source.
  • only-if-cached: The existing cache data will be used to satisfy a request, regardless of its age or expiration date. If there is no existing data in the cache corresponding to a URL load request, no attempt is made to load the data from the originating source, and the load is considered to have failed.
  • reload: The data for the URL will be loaded from the originating source. No existing cache data should be used to satisfy a URL load request.

headers

The object representing the HTTP headers to send along with the request for a remote image.

height

The height of the source.

method

The HTTP Method to use. Defaults to GET if not specified.

scale

scale is used to indicate the scale factor of the image. Defaults to 1.0 if unspecified, meaning that one image pixel equates to one display point / DIP.

uri

Uri for the image, can be string or

 expression.

width

The width and height can be specified if known at build time, in which case these will be used to set the default image component dimensions.

Other options



data

Provide the x and y coordinates to be placed on the image.

groups

This property includes title and id, with the additional option of adding a color for your group and maximumPoints, which defines the maximum possible number of selected points. The groups property is used to specify certain groups to distinguish between selected/unselected and otherwise specified areas.

imageHeight

The height of the image is specific. If the height is bigger than the image ratio (width/height), the height is correlated based on the image dimensions.

item

There is only one available option, which is interactive-image-item.

pointColor

The color of the point(s) marked on the image. The default color for point items is inactive state.

Considerations

  • The interactive component serves as a container for the interactive-image-item component.
  • The images can be preloaded and cached using the asset folder's images file. The images will be displayed even when you are offline. For more details, refer to Assets.



Updated 19 Aug 2024
Doc contributor
Did this page help you?