Display an image to users. The image component displays a single image that can dynamically change based on user interaction. Often, these are product photos, user headshots, or user-submitted visual content.

‍

Ways to use an image

In-line within other components

You can add an in-line image (child component) to a table, detail view, or card list (parent component). The image is automatically displayed for every record in the parent component and is usually bound to data from that record.

Example:
You have a table showing a list of potential Scooters that need to be approved. You can add an image that corresponds to the scooter in that row (the image name for each scooter is within the data of that row).

‍

‍

Image browser bound to a table

A single image component can display different images based on the row a user selects in a table, letting you create a simple image browsing tool.

Example:
You have a table showing a list of potential Sample Images. Next to it, you have an image component that’s bound to the filepath field in the table, which has the image filename. Selecting a row in the table will now display the image next to it.

‍

‍

Display private images in your S3 bucket

If you've added a S3 data source you can use the image component's advanced features to display non-publicly available images (we'll sign using your S3 credentials).

Configuring your image

Basics

The image displayed is based on a template URL that you define. This template specifies the path (and filename) for your image.

Example template:
https://assets.example-files.com/${customField1.value}

In this example, we have a fixed portion of the URL: https://assets.example-files.com/ as well as the variable portion ${customField1.value}.
The variable portion will pull the remainder of the path (including the image filename) from what is entered into the filter component (named customField1).

Thus, if what was entered into customField1 was image1.jpg, the image component would display the image at https://assets.example-files.com/image1.jpg. This image will change when a user inputs something different into customField1.

Video tutorial on setting up the image component:

‍

First, you'll need to decide how you're going to construct the template URL:

‍

1 - Use data from parent component (in-line image)

For images within another component, you can use the parent component's data to construct the template URL. Click insert a variable and reference the parent component's data ("This Row"/"This Table"/etc).

Example:
Let’s walk through our in-line images in a Scooters table from the first example. Each scooter has an associated image, with the filename contained in a field called Image Name. You can insert an image in-line, and specify that the URL is completed with the filename coming from the Image Name field.

‍

‍

2 - Use data from a component in this space (not in-line)

You'll use another component, like a table, to provide the data necessary for your URL. In this case, leave the toggle off. Use "insert a variable" to specify the component and then the field that you want to use in your template URL.

Example:
Let's walk through our second example from above, showing a "Sample Images" table with an image component next to it. Your sample images are stored at the path https://picsum.photos/. Each image file name is stored in the "Sample Images" database table, under the column filepath (ie, "401.jpg").

When you go to configure your image component, in template, enter https://picsum.photos/ and then click "Insert a variable”. Choose the “Sample Images” table you added earlier, and then choose Selected Row -> Data -> filepath.

‍

3 - Fetch the data from a resource (not in-line)

If there aren't any components you want to use, you can get the data directly from the resource. Turn the toggle on. Then select the resource with the data you want.

Next, you'll build out the template URL as before - starting with the fixed path, and then using the "insert a variable" link. This time, you'll want to select Image -> Data -> columnname, where columnname contains the variable data you need for the image URL.

Example using a resource to provide template data:
Let's use the same set-up as the previous example, where we have a resource "Sample Images" that has a column filepath with the data we need for the image URL.

This time, we're turning the toggle on and selecting our resource, which is called "Samples" (in a data source named "Test Images"). Then we fill out the fixed part of the URl template, and add a variable. We select Image (referring back to this component), and then the filepath field we need.

‍

If you fetch directly from a resource, you'll need to specify which record's data to use. For example, if you chose to use the filepath field, you still need to specify which record's filepath should be used (i.e., which row of table data).

‍

You can do this by setting filters to identify a specific record. If more than one record fulfills the filter criteria, the first available record's data will be used for this image. Ordering criteria (see below) can help you influence what record is first.

‍

Go to the "Advanced" tab and click “+ Add filter” to add your first filter.

Each filter has a data field which is compared to a value. A preset filter compares against a fixed value, whereas a dynamic filter compares against data from another component.

‍

Dynamic filter example

Let's say you want to display the headshot of a user, if their ID is entered into a filter component called userID. We also have a resource called Headshots, which has an ID for each user and a filepath column with that user's headshot's filename.

We'll add and configure an image to fetch the filepath data from the Headshots resource. We then add our dynamic filter in our image configuration, specifying that we should grab the data from the record whose ID matches the userID filter value.

‍

Preset filter and ordering example

Less commonly, you may want to compare against a fixed value. Usually using a fixed value will get you the same image (until the underlying data changes), but we can also use the order to influence what image appears. Let's use our previous example, but this time we want to display the headshot of the most recent active user. In your Headshots resource, you also have the status of each user ("active"/"suspended") as well as the last_login date/time.

We can create a filter to only show "active" status, and then order the records by last_login in descending order - this will mean that the active user who most recently logged in will be the record this image component binds to (and will show that user's headshot).

‍

Advanced

‍

Signing with S3

To allow the download and display of images from a private S3 bucket, you can sign the request with your S3 credentials. Simply select the S3 data source.

‍

Provide a label for the field (Basics tab)

This label appears above the image.

Note: This option only appears for image components that are inserted in-line within another component (like a detail or card list).

‍