image
The image widget is set up primarily for displaying an image on the or jig.
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.
Core structure | |
|---|---|
source | For the URL of the image. The following can be used: - https//: imagesource - image from a datasource referenced in an expression The image source (either a remote URL or a local file resource).This property can contain several remote URLs, specified together with their width and height and scale.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 network requests interact with the local cache. Supported formats are png, jpg, jpeg, bmp, gif, webp (Android only), psd (iOS only). |
Other options | |
|---|---|
bottom | The titles component will be added to the bottom of the widget. |
footer | Add text to the footer of the widget. |
footerAlign | Align the footer text to left, right, center. |
height | Change constraints of an image's height. Use a proper resizeMode to achieve the best results in all different device resolutions. |
isContentOverlaid | Specifiy if the titles component and description should overlay the image or placed above/ below the image. Use true for overlay, false for above or below. |
placeholders | Specify a placeholder text to display if there is no data, for example - title: No data to display. |
resizeMode | Determines how to resize the image when the frame doesn't match the raw image dimensions. - cover: Scale the image uniformly (maintain the image's aspect ratio)so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). - contain: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). - stretch: Scale width and height independently, This may change the aspect ratio of the source. - center: Scale the image down so that it is completely visible, if bigger than the area of the view. The image will not be scaled up. |
top | The titles component will be added to the top of the widget. |
An image widget using 2x2 size with component.titles at the bottom to add a name of the image and an icon.
Examples: See the complete example using in GitHub.
An image widget using 2x4 size with component.titles at the top to add a name title and email subtitle and an icon.
Example: See the complete example in GitHub.
An image widget using 4x2 size with component.titles at the bottom to add a location title and an icon on the right.
Example: See the complete example in GitHub.
In this example two image widgets are combined into one group with the component.title at the bottom to show the score and team names.
Example: See the complete example in GitHub.
The 4x4 image widget in this example is a simple widget with just an image shown. This is great when you want to combine the widget in another .
