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.

A full example setup on Image is available in our Showroom. You may view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register on Showroom Signup.

An alternative to the Image UI Component may in some cases be to use the Container. A Container may be given a background image.

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.

This image component will display a QR code pointing to Appfarm's website

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 property File Content (which is in fact an URL)

• A property Company Logo of type Image URL, found on the Object Class Company.

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.

Fullscreen Preview must be enabled in order to have the next two options available: Enable Image Tools and Pen Tool.

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.