Image
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
The Image component can be used to display custom QR codes. Use a to return the following URL in the Image property: https://icons.appfarm.io/qr/v1?url={QR-CODE-STRING}. See the example below.
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 property File Content (which is in fact an URL)
A property Company Logo of type Image URL, found on the Object Class Company.
An alternative description of the image, which is useful for accessibility.
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.
Opens the Image in fullscreen mode when the user clicks it.
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.
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.
Select an action to run when the Image is clicked.
Select an action to run when the Image has loaded.
Enabling this flag 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 .
