How can you display an image from a blob file without having read it from the server or url?

How can you display an image from a blob file without having read it from the server or url?

I've learned about the multiple ways of rendering an image during my apprenticeship on HTML5 fundamentals. However, since I never put them into practice, I forget about them (like most theories).

The Story

MJML

To render responsive emails sent to customers, we use MJML. As such, you don't need to cater screen sizes for different devices. This library does it for you. It's basically like a template driven language, thought it's more focused on formatting. You can then choose your own templating engine amongst several options. We use handlebars.

Now we also need to include in the email, a logo file, which is stored in the server. Previously, this is done by having a static public url in the IMG tag that is easily accessible all over the net. The image is downloaded when the person opens the email. Nevertheless, as we are selecting the new logo dynamically, which is stored on the server, there is no clear and easy way to send the photo.

Sign of the @ icon.
Photo by Onlineprinters / Unsplash

Researching through multiple channels for a solution, I stumble upon an interesting lead.

Even though the code is in PHP, as a software developer, I easily extrapolate the logic and apply it to NodeJS and HTML5 for the email. The idea is to retrieve the file in blob format and encode it in base 64. Once done, concatenate with some string characters before including it as an image source.

Done.


References

https://stackoverflow.com/questions/34111390/displaying-blob-image-from-mysql-database-into-dynamic-div-in-html

https://stackoverflow.com/questions/6182315/how-to-do-base64-encoding-in-node-js