Image
The Image is used to display images. The UI Component may be used to display Resource Files or File Object Classes of file type, or it may be used to display images from Image URL Object Class Properties.
When using the Image UI Component, the actual width and height of the image file will be used as default (up to 100% of the screen width) unless a Width or Max Width is set on the Styling tab of the UI Component.
Generate and display QR Codes
The Image component can be used to display custom QR codes. Use a Function to return the following URL in the Image property: https://icons.appfarm.io/qr/v1?url={QR-CODE-STRING}
. See the example below.

Settings
Image
This is where you connect the Image to your Data.
Examples of what the Image UI Component may be connected to:
A Resource File uploaded to Appfarm Create named
background.png
An object from the File Object Class
Task Photos
, connected to the propertyFile Content
(which is in fact an URL)A property
Company Logo
of type Image URL, found on the Object ClassCompany
.
Alt Text
An alternative description of the image, which is useful for accessibility.
Lazy Load Image
This setting is enabled as a default. Useful when listing many or large images. The image will be loaded when it is close to the visible screen (the viewport). E.g. when scrolling down a list of images, the image will be loaded (file data read from the server to the client) when the image reaches a calculated distance from the visible viewport.
Responsive Image
This setting is enabled as a default and serves images in a size that matches the browser's viewport, decreasing page load times and reducing bandwidth. This feature only works for images that have been saved in Appfarm. In other words, when the Image UI Component displays the File Content URL of a File Object Class. Responsive Images is a web standard, and you may read more here.
Fullscreen Preview
Opens the Image in full-screen mode when the user clicks it.
Enable Image Tools
Enables image manipulation tools when the image is in fullscreen mode.
This setting is only available when the Image is bound to a Runtime Only Data Source, and the Data Source is a File Object Class.
Pen Tool
Enables the pen tool when the image is in fullscreen mode, for drawing on the image and saving the result back to the data source.
This setting is only available when Enable Image Tools is checked.
On Click
Select an action to run when the Image is clicked.
On Load
Select an action to run when the Image has loaded.
Last updated
Was this helpful?