Rendering s3 image in list view

I'm trying to show s3 image in list view using query but don't have any idea.
How to do that?

Hi Artem! Thanks for your question.

Here is a set of steps that I followed to display an image hosted on AWS S3 in a Retool list view component. You can review the Retool docs on how to connect to Amazon S3 and S3-compatible services or query S3 data, and AWS S3 getting started docs here.

First, create a S3 bucket at, like so:

For simplicity's sake, I've set my S3 demo bucket to publicly visible, which lets me later copy and paste URLs into a Retool database. Setting a bucket to public creates numerous risks, so I recommend you read more about how AWS handles ACLs and CORS here, then determine a way to generate signed URLs to use instead of the public URLs that I used. For further questions on handling privacy for AWS S3 buckets, I recommend an AWS specific forum like or Stack Overflow's S3 tag.

For each image you upload to S3, I set them to public by clicking the Actions v button:

After uploading each image to S3, you can click the hyperlink in the file name to get access to the public S3 URL:

I used a Retool PostgreSQL Database on Retool Cloud (learn more here) to store each URL as a string:

After you've stored all the images in S3 and URLs in a database, you can build the front end list view app in Retool's app builder. Start by dragging and dropping a list view into the main window, then remove the first placeholder component list item:

From an empty list view component, drag and drop an image component into the first instance of the list, so that it repeats:

Now that we have a list of empty images, write a query to get a list of all your image URLs:

Select the list view component, and set Data Source to your query:

Finally, select the first image component in the list, and under Content -> Image Source -> URL, fill out the dot notation path to the object containing your URL string, ex. {{[i]}}. Finally, you can click and drag to resize your list view, to see all the images in the list.

I hope that helps!

Hi @max_wiederholt , Great Answer. What steps needs to be followed when the url is not supposed to be public?

Hey @khatanaashish! If the image url isn't public then you would need to use a signed url to get the image. You can generate a signed url for a GET request to the image and then use that url instead of the public one.

1 Like