Display images

Displaying images in your tools is a pretty common use case, and there are a bunch of ways to get that done in Retool. Here's what we'll cover:

• Image components
• Text components
• Table components
• Image Sizing

We'll talk about rendering images via URL as well as Base64 strings.

Image components

Via URL

The easiest way to display an image in Retool is via a URL. Start by dragging an image component onto your canvas (or into a container, tabbed container, etc.). Click on it, and you should see an "Image URL" field in the sidebar.

You can paste in your desired URL (hardcoded), or reference it via JavaScript in curly braces ({{ }}). For example, if you're working with a table and you want to reference an "image" column from the selected row, you could use {{ table1.selectedRow.data.image }} in your image component.

Via Base64

Retool's image component takes a URL to display, but you can also use a Base64 string. Drag an image component on to your canvas:

Click on the image component you just added, on head over to the "Image URL" field on the right sidebar. Instead of a URL, you can add in a Base64 string prepended with the right descriptor. We grabbed a picture of a mirror (spooky), and it's a JPEG, so we'll prepend the Base64 string with data:image/jpeg;base64,.

The whole Base64 string is too long to paste here, but the first part of it looks like /9j/4AAQSkZJRgABAQAAAQABAAD/2. We'll prepend that with our descriptor so it looks like data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2... and then add that in to the "Image URL" field in our image component:

If all went well, your image component should update and show our mirror.

If your Base64 image string is coming from a query, you can do the prepending in {{}} if you concatenate the strings properly. If we've stored an image's Base64 string as imageString in our database, we can put {{ "data:image/jpeg;base64," + imageString }} in the "Image URL" field. If that imageString is coming from a table or a query, you would change it to {{ "data:image/jpeg;base64," + table.data.imageString }} or {{ "data:image/jpeg;base64," + query.data.imageString }}.

Text components

You can also display an image in a Text component using the "Render as HTML" toggle. Start by dragging a text component onto the canvas:

Click on the image (or click on the "Inspector" tab in the right sidebar) and toggle the "Render as HTML" parameter on.

Add an image tag into the "Value" field (<img>), and from there you can put whatever you want in the src= field: a URL or a Base64 string. If we wanted to do the latter, we can add the same reference to the Base64 string as above into the src=. So for our mirror image, we should use <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2...">. And if we're referencing an image from a table or query, we'd use something like <img src={{ "data:image/jpeg;base64," + query.data.imageString }}>.

Table components

You can use the same "Render as HTML" format for rendering images in Table components. After you've pulled data into your table using a query (let's say you used {{ query1.data }}), you can toggle individual columns to render their results as HTML. Click on the table component, head to the right sidebar, and click on the column that contains your image:

Like with the Text component above, you can use <img src={{ imageURL }}"> if you have a URL for the image you want to display, or <img src={{ "data:image/jpeg;base64," + imageString }}> to reference your image in Base64. In the table component though, we'll use the self. property to reference the current column, so the value for the value in the "Mapper" field should be <img src={{ "data:image/jpeg;base64," + self.imageString }}>. This makes sure you're referencing properties of the cell you're working with instead of something global.

Image sizing

For Image components

If you're using an image component, the image size will scale to the size of your component. So if you want to make the image larger you can drag the corner outward, and if you want to make it smaller you can drag it inwards. Currently, Retool doesn't support custom widths and heights for images rendered via Image components.

For Text and Table components

If you're rendering your image via HTML in a Text or Table component, you're in luck: you can set your image's width and height with that same HTML! Here's an example of what we'd put in the Text component's value field:

<img src="your-url.com/image" width="200px" height="200px">

You can also use percentage widths:

<img src="your-url.com/image" width="80%" height="80%">

The percentage values will get evaluated as a percentage of the image's container, which will be the Text or Table component that you're using.

📘

Ask the community about Images

If you're running into any issues with the Image component, check out some of the answered questions on our community forums, or ask one of your own.