Displaying an image from a database field

App Building
1

I would like to add images to a form that are held in an image field in an MS-SQL database. I am trying to add something like {{query2.data.Image200x200}} to an image field or other field. Is there a way I can do this with HTML? I can't figure it out.
Thank you!

2

Hey @pdamato! There are two ways you can do this in Retool, depending on what format your image is stored in your . database.

  1. You can use our Image component to display via URL, if you have one
  2. You can use our Text component and toggle the “Render HTML” button on the right sidebar:
3

Hey @pdamato! There are two ways you can do this in Retool, depending on what format your image is stored in your . database.

  1. You can use our Image component to display via URL, if you have one
  2. You can use our Text component and toggle the “Render HTML” button on the right sidebar: https://share.getcloudapp.com/L1ukly99
    If you’re storing it as Base64, you’d use something like this as your HTML in the Text component’s value field:
    <img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAZIAAABkCAMAAACb4=="/>
4

I’m sure I’m just not understanding this, but here is what I have. I tried png and jpeg. Thank you!

5

@pdamato what kind of data does that query give you? You can inspect what {{ query2.data.SmallImage[0] }} looks like in the left sidebar

6

image
image265Ă—914 33.3 KB

7

Here is the image of the query result. I may not be requesting this properly. Thank you!

8

I don’t understand how to set the imgage source to the result of a query. In your example, you have the data as a base64 string. I don’t see how to insert that into the HTML. I suppose it would be something like “img src=data:image/jpeg;base64,{{query2.data.Smallimage[0]}}>” but I must not be getting the syntax right or something.

9

@pdamato hm, tough to tell without being in your shoes. Try <img src={{ 'data:image/jpeg;base64,' + query2.data.Smallimage[0] }}> as you might be getting caught up with string issues.

10

@pdamato wrote some docs on this today! https://docs.retool.com/docs/rendering-base64-images

11

I have a similar issue. My retool database or sheet has 3 columns name, description, and image . I have my collectionview setup it pulls the name and description like {{item.name}} etc. The name and description show but the image box is always blank. When i go to my retool data base i notice next to the image column its type is text and there is no img option i can find. How do i display my images ? ANY HELP IS APPRECIATED

12

Can you post some screenshots?

1 Like
13

Hi @Brandon_Tindle

Thanks for reaching out! Agreed with Scott, it would be helpful to see some screenshots.

Within the collection view, you can set up an image like this. It's expecting a url.

Is your image column populated with image urls? If you already have it set up like this and don't see any images, can you check the browser console to see if there are any errors?

14

20230620_114455.jpg
20230620_114455.jpg1836Ă—4080 3.45 MB

20230620_114519.jpg
20230620_114519.jpg918Ă—2040 960 KB

15

Hi @Brandon_Tindle,

Thanks so much! I'm not sure why, but the exact same setup is working on my side :thinking: Any chance I can log in to your account to take a look at your app? I just need your permission & the app name

16

My app is almost finished and I'll be launching after it launched. I would be okay with that.

17

Hi @Brandon_Tindle


I stepped into your app and it looks like the collectionView1 is working properly with displaying the image. Are you seeing the same thing on your side?

18

I will send you a direct message with a screenshot

19

Yes, it is working.

20