Getting started 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.
If you are using Source Control, large images uploaded to the Image component are not committed and stored in Source Control in order to reduce file size and adhere to industry standard best practices. Instead, Retool recommends hosting the image on a public URL and using the URL option for the image source.
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.