Image

The image component is used to display images. To add an image, link to an image using the URL setting. For example, add <https://source.unsplash.com/random> to the URL setting, and a random image from Unsplash will be added to your app.

Displaying images from an attachment

Images can be uploaded as Attachments and you may wish to display these outside of a Table.

Data

Create a table called Vehicles with a category name and an attachment column for the images. Upload your images.

Design

1. Add a Data Provider for the Vehicles table.
2. Add a Repeater to the data provider. This will add a container for each Vehicles row.
3. Add a Headline to display a title for each Vehicles category.
   The Binding in this case is {{ Vehicles Repeater.Vehicles.Category }}
4. Underneath the headline, add a data provider for the "Images" attachment field.
   Attachments are saved as JSON Arrays which allows them to be used as a data source.

5. Add a repeater so that each attachment image can be displayed. Select Row Direction to get the images to display horizontally.

6. Finally, add an Image component within the repeater. Select the attachment URL from the dropdown:

Result

Single or fixed number of image attachments

If you know there will only be a single image attachment, then you do not need to add a data provider and repeater for the attachment column.
Instead, you can simply use the URL binding: {{ Vehicles Repeater.Vehicles.Images.0.url }}

For a fixed number of attachments, simply adjust the index in the URL for each image component.

Displaying images from an S3 bucket

You may wish to use an external S3 bucket to store your image files instead of the built-in MinIO bucket.

Data

Upload your images to your S3 bucket. You will need to allow public access to the images in AWS:

Next add your S3 Datasource with a simple Read query to list all of the files in the bucket.

Design

Add a Repeater Block with the Read query as its datasource. Nest your image components, using the following URL binding: https://<bucket-name>.s3.us-west-1.amazonaws.com/{{ New Repeater block.Read.Key }}

Image carousel

There is no built-in slideshow component, however there is a tutorial here for building one.

Background image

Add the background image component. This component can take children which will appear in front of the background.

Provide a valid URL as the image source. The Position property can also be edited to offset the background image.