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. 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.
|
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 | |
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. |
- 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.
