Displaying an image from a database field

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!

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:

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=="/>

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

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

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

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.

@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.

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