I am using self-hosted Retool and have an image that is already uploaded for use elsewhere in the app that I also want to display as part of a text component. Importantly, it needs to be part of the default value for the component. The contents of this component will then be passed to an smtp query as the body of an email. The image has a source type of dbBlobId. I was hoping there was a way to modify the instructions here: Display images | Retool Docs for displaying an image with a Base64 string to work with a dbBlobId, but I haven't figured out how to make it work or if it is even possible. Any advice would be appreciated.
Hello @LindenKel ,
Thank you for your question.
To display an image with a dbBlobId in a text component within Retool, you should convert it to a Base64 string first as Retool doesn't support displaying images from dbBlobId directly. Here's how you can do that:
- Use a backend endpoint or find an API that can convert a blob to a Base64 string.
- Use JS query or the 'fetch' function in Retool to send the blobId to the endpoint.
- Store the received Base64 string in a temporary state or directly in the text component.
- Decorate the Base64 string using Retool's instructions to embed it into the text component.
Additionally, you can consider the alternative method of hosting your image on a public access platform like an S3 bucket then embedding the URL into your text component using 'img' HTML tags.
Be aware that both methods involve certain risks - converting a blob to a Base64 string could slow down Retool or enlarge the email body, not to mention dealing with Cross-Origin Resource Sharing (CORS) issues on your server. Also, if your server isn't secured properly, sensitive data could be exposed.
For the code part, you should convert the blob to a Base64 string with JavaScript (e.g., {{ utils.convertBlobToBase64(yourBlobID) }}) and add an image tag to the "Value" field, like <img src="data:image/jpeg;base64,{{utils.convertBlobToBase64(yourBlobID)}}" />. Make sure to replace yourBlobID with your actual blob reference and prefix the Base64 string with the appropriate data type for web content (i.e., data:image/jpeg;base64,).
When setting up your smtp query, ensure it can handle rendering HTML content containing images encoded with Base64.
Hope this helps.
-Brett
This doesn't seem to be working for me unfortunately. This is my code:
When I hover over it, I get a tooltip that "utils is not defined" and when I try to run this:
as JS code, I get the message that "utils.convertBlobToBase64 is not a function". Is that something that's been added recently? I'm currently running version 3.20.4 if that makes a difference.
Okay, so it looks like I should be using utils.getDataByObjectURL(), but I can't figure out what I should be passing to it, as image5.dbBlobId does not seem to work and neither does anything else I've tried.