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.
- You can use our Image component to display via URL, if you have one
- 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.
- You can use our Image component to display via URL, if you have one
- 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.