Display images with the Image component
Learn about the different ways to include images in your apps.
You can display images in Retool apps in a variety of ways. Multiple components support images, and you can use URLs or Base64 strings to render images.
Display images with Image components
The default way to display images in Retool apps is with a URL and the Image component. Start by dragging an Image component onto the canvas.
You can pass the image's URL in the Image URL property, or reference it using JavaScript in curly brackets ({{ }}
). For example, if you're working with a table and you want to reference an image in the selected row, you could use {{ table1.selectedRow.image }}
as the source in your Image component.
Display Base64 images
Retool's Image component defaults to using a URL, but you can also use a Base64 string. Pass the string in the Image source field, and prepend it with the appropriate descriptor. The example below is a JPEG so the string is prepended with data:image/jpeg;base64,
.
If your Base64 image string is returned by a query, you can do the prepending in curly brackets {{ }}
. For example, if you've stored an image's Base64 string as imageString
in your database, you can
{{ "data:image/jpeg;base64," + imageString }}
in the Image URL property.
If the imageString
comes from a table or a query, you would pass {{ "data:image/jpeg;base64," + table.data.imageString }}
or {{ "data:image/jpeg;base64," + query.data.imageString }}
instead.
Display images in Text components
You can also display images in Text components using an HTML img
tag.
You can pass URLs or Base64 strings this way. If your app has images within it, you can reference them using curly brackets. For example, <img src={{ "data:image/jpeg;base64," + query1.data.imageString }}>
pulls an image from query1
, and prepends the string with data:image/jpeg;base64,
.
Display images in Table components
You can display images in Table components using the HTML column type and the img
HTML tag. Add data to your table and then set the column type to HTML on the column that you want to render images in. Use the Mapped value property to pass in the img
tag and the image's source.
Resize images
Images in Image components scale to the size of the component. Click and drag a corner of the component to resize it.
You can resize images displayed using the img
HTML tag by setting width
and height
values:
<img src="your-url.com/image" width="200px" height="200px" />
You can also use percentages:
<img src="your-url.com/image" width="80%" height="80%" />
Percentage values are evaluated based on the size of the Text or Table component used to display the image.