interactive-image

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

Configuration options

Some properties are common to all components, see Common component properties for a list and their 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 Jigx 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 .
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.