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.
First, you'll need to decide how you're going to construct the template URL:
1 - Use data from parent component (for in-line images) or from another component in this Space
If you have existing components in the Space that contains the data needed for the URL, you don’t need to grab additional data from your source, and you can keep the “This image does not require a source” checkbox checked. You should also keep this box checked if the image is in-line within a parent component, and you want to use data in the parent component.
Begin constructing your template URL, and then click “Insert a variable”. Specify the component and then the field that you want to use in your template URL. If you’re working with an in-line image, you can reference the parent component’s data ("This Row"/"This Table"/etc).
2 - Fetch data from source
If there are no existing components with the data you want to use, you can use a function to fetch data from your data source. Uncheck the checkbox, then choose the data source and then the data you want to use.
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 This Image -> Data -> columnname, where columnname contains the variable data you need for the image URL.
If you fetch directly from a source, 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 "Filters" section and click “+” 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 database table 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 table in our data source. 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 sort 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 database table, 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 sort 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).
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.
You can name your image component. For in-line image components, you can also add a label that will appear above the image (ie, the column name if the image is in-line within a table).
You can create visibility rules that will determine when this component is visible and able to be interacted with.