Using links as image sources in tables

App Building
,
1

I have a table, where there is a column that represents user image, the values in that column are public URLs, currently, the table shows the URL as a text, how can I make the table show the actual image instead of the URL

2

Hey @Alaaddin!

Great question, one option could be to render the column as HTML and use the mapper to build out an HTML img tag. To do this, first you would need to select your table and in the instpector (right panel) you could select your column and toggle it to render as HTML like this:

559×675 56.5 KB

Copyable code here:

<img src="{{self}}" style="height:100px;">This should now render an image in this cell:

1038×189 33.8 KB

Hope this helps, let me know if you have any questions! :slight_smile:

1 Like
3

How would this work if I have the image file encoded as base64 rather than a URL?

4

perfect, thanks a lot for your answer. I am new to retool, I think I will be asking lots of questions. thanks a lot for your fast response.

5

Hey @zoombie3000!

If you have a base64 encoded image you could use:

<img src="data:image/jpeg;base64, {{self}}" style="height:100px;">

would this work for your use case here?


@Alaaddin,

No problem, happy to help anytime if you hit any snags! :)

6

If there is an empty url it shows the following image
image

I'd like to remove the non-descriptive image and just have a blank or a red X. I need a bit of help with the syntax. Tried numberous iterations such as

image
image1436×66 8.79 KB

for an example

Thanks

7

Hey @Dhof!

Great question, I believe the best way to get around this would be to write a Javascript function on the window for your app (link to docs here on pre-loaded javascript). To do this, first, select "Scripts and styles" from the "..." dropdown in your app editor.

Next, in the Javascript tab, we can write the following function:

window.formatImageCell = (cell) => {
  if (cell == null) return;
  return "<img src='data:image/jpeg;base64," + cell + "'style='height:100px;'>";
}

This will give us access to the formatImageCell() function where we can pass either a null value or a base64 image and get the appropriately formatted return.

Next, in our tables mapper, we can now interpolate this value like this:

{{formatImageCell(self)}}

952×424 51.2 KB

Do you think this could work for your use case here?

1 Like