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.
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.
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.
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).
The image displayed is based on a template URL that you define. This template specifies the path (and filename) for your image.
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).
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.
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.
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).
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.