The image component allows you to display images within your space. These can be product photos, user headshots or any other images that your internal tool requires.

Image Configuration

The image for the image component will come from a URL based on the template that you define here. This template will allow you to specify the path where your images are hosted. You can insert variables that will allow you to define the exact image file name, and also handle variables in your image path.

To create a template, start typing in the URL for your image. If you come to any part of the URL that is not a fixed value, use the "insert a variable" link - you can then specify where your variable values will come from (a filter component, detail component, or table row).

The name you give your image component will be used to reference the component but is not displayed in your Space to users.

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.

‍

Template Example

You have a number of product photos stored at the path "www.example.com/images/". Each image file name is stored in the "Products" database table, under the column "imagefile" (ie, "product11.png"). You want to build a tool that will show the image for each product when a user clicks on that product.

First, add a table for your "Products" resource and make sure the "imagefile" column is available as an input (either as a table field or hidden field). Then, add your image component. In template, enter "www.example.com/images/" and then click "Insert a variable". Choose the Products table you added earlier, and then choose Selected Row -> Data -> imagefile.

This will bind the image component to the Products table so that any time a user selects a row in the Products table, the image component will look for the associated image for that product and display it in the Space.