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.
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. A cache property can be added to control how networked requests interact with the local cache. The currently supported formats are png, jpg, jpeg, bmp, gif, webp (Android only), psd (iOS only). |
Other options | |
data | Provide the x and y coordinates to be placed on the image. |
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. |
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. |
pointColor | The color of the point(s) marked on the image. The default color for point items is inactive state. |
- 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.
- Developer reference