How to Display Images from URLs in Retool

In the Retool component panel, find Image under the Media section. Drag it onto the canvas. Select the Image component and look at the Inspector panel. In the General section, find the Source (or Image URL) field. Enter any public HTTPS image URL — for example, https://via.placeholder.com/300x200 for a test image. The Image component renders the image at the component's dimensions (adjust by dragging component edges). In the Inspector's Layout section, set Object fit to: Cover (fills the frame, may crop), Contain (shows full image, may add letterboxing), or Fill (stretches to fill). Cover is most common for thumbnails.

To display an image that comes from a database query, bind the Image component's Source field to a `{{ }}` expression referencing your query data. First, run a query that returns image URLs (e.g., SELECT id, name, photo_url FROM users LIMIT 1). Then in the Image component's Source field, enter: `{{ query1.data[0].photo_url }}` For the currently selected table row, use: `{{ table1.selectedRow.photo_url }}` This enables a master-detail pattern: when a user clicks a table row, the Image component updates to show that row's image.

1// Image component → Source field examples:
2
3// Show first record's image
4{{ query1.data[0].photo_url }}
5
6// Show selected table row's image
7{{ table1.selectedRow.photo_url }}
8
9// Show image with fallback for null/undefined URLs
10{{ table1.selectedRow.photo_url || 'https://via.placeholder.com/100?text=No+Photo' }}
11
12// Show image from a state variable
13{{ selectedImageUrl.value }}

For tables where each row should show an image (product catalogs, user directories, etc.), add a custom Image column. Select the Table component → Inspector → Columns → click the + icon to add a custom column. Set the Column type to Image. In the Value field for that column, enter a `{{ }}` expression: `{{ currentRow.photo_url }}` Retool renders each row's image as a thumbnail inside the table cell. You can control thumbnail size in the column's Width setting. The images load lazily as rows become visible.

1// Table custom column → Image type → Value field:
2{{ currentRow.photo_url }}
3
4// With fallback for missing images:
5{{ currentRow.photo_url || 'https://via.placeholder.com/40?text=?' }}
6
7// For avatars (sometimes stored as user.avatar.url in nested objects):
8{{ currentRow.avatar ? currentRow.avatar.url : '' }}

When users upload images via Retool's File Picker component, the uploaded file is stored as a base64-encoded string accessible via `{{ filePicker1.value[0] }}` (the `[0]` because File Picker returns an array of files). To display an uploaded image immediately after selection (for preview), set an Image component's Source to a data URI:

1// Image component → Source field to preview File Picker upload:
2data:{{ filePicker1.value[0].type }};base64,{{ filePicker1.value[0].base64Data }}
3
4// More commonly written as:
5{{ 'data:' + filePicker1.value[0].type + ';base64,' + filePicker1.value[0].base64Data }}
6
7// Check if a file is selected before building the data URI:
8{{ filePicker1.value.length > 0 
9   ? 'data:' + filePicker1.value[0].type + ';base64,' + filePicker1.value[0].base64Data 
10   : '' }}

If images are stored in a private S3 bucket, direct URLs won't work because they require authentication. Generate pre-signed URLs via a JS Query that calls your S3 resource. Pre-signed URLs are time-limited (typically 1-24 hours) and require the S3 bucket name and object key. Create a JS Query named getPresignedUrl that takes the object key and returns a temporary URL:

1// JS Query: getPresignedUrl
2// Calls an API resource that generates pre-signed URLs
3// First, create an API resource that wraps your S3 presign endpoint
4
5// Alternative: use Retool's AWS S3 resource directly
6// In a REST API query:
7// GET https://s3.amazonaws.com/{{ s3BucketName }}/{{ objectKey }}
8// With AWS Signature auth configured in the resource
9
10// JS Query to build the S3 URL for display:
11const bucketName = 'my-company-bucket';
12const objectKey = table1.selectedRow.s3_key;
13const region = 'us-east-1';
14
15// For public S3 buckets (not recommended for production):
16return `https://${bucketName}.s3.${region}.amazonaws.com/${objectKey}`;
17
18// For private buckets, call your backend presign endpoint:
19// return await fetch('/api/s3/presign?key=' + objectKey).then(r => r.json()).then(d => d.url);

When an image URL is null, undefined, or points to a non-existent resource, the Image component shows a broken image icon. Handle this gracefully by providing fallback URLs using JavaScript's || operator in the Source expression. For more control, use a Text component with HTML mode to implement the native onerror handler:

1// Simple fallback in Image component Source field:
2{{ table1.selectedRow.photo_url || 'https://ui-avatars.com/api/?name=' + table1.selectedRow.name }}
3
4// Text component with HTML mode enabled (more control):
5// <img src="{{ table1.selectedRow.photo_url }}"
6//      onerror="this.src='https://via.placeholder.com/100?text=No+Image'"
7//      style="width:100%;height:100%;object-fit:cover;border-radius:8px;" />
8
9// JS Query to validate URL before displaying:
10const url = table1.selectedRow.photo_url;
11if (!url || typeof url !== 'string' || !url.startsWith('http')) {
12  return 'https://via.placeholder.com/100?text=No+Image';
13}
14return url;