Image
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.
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.
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
Source & Image URL
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.
Filters & Sorting
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).
Sign your image
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.
Text
Name your image component (used to reference this component in Internal). You can also add an image title that will appear above the image.
Visibility Rules
You can create visibility rules that will determine when this component is visible and able to be interacted with.
Design
Left and Top options only appear for top-level components (components that are placed directly onto the Space canvas).
Left: Set the distance of this component from the left edge of the Space canvas (x-axis position). This can be expressed as a % of the canvas or as a number of pixels.
Top: Set the distance of this component from the top edge of the Space canvas (y-axis position). This can be expressed as a % of the canvas or as a number of pixels.
Width: Set the width of this component as a number of pixels or as a % of the containing unit.
Height: Set the height of this component as a number of pixels or as a % of the containing unit.
If the component is a top-level component, the containing unit is the Space canvas.
If the component is in-line within another component, the containing unit is the parent component.
If the component is within a flexbox component, the containing unit is the flexbox.
Snap to Grid: Set the edges of this component to snap to the grid canvas in the Space.
