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.

25592559

 

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.

959959

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.
270270
  1. Add a repeater so that each attachment image can be displayed. Select Row Direction to get the images to display horizontally.
236236
  1. Finally, add an Image component within the repeater. Select the attachment URL from the dropdown:
236236

Result

12271227

 

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.

Image carousel

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


Did this page help you?