Let’s say that you have an HTML template with <img> tags. Normally to display a base64 encoded image in a browser you would do
<img src=”data:image/png;base64, base64EncodedString" />
But this approach won’t work for all mail clients. For instance Gmail blocks display of all base64 encoded strings for security and spamming reasons. By providing the image with a Content-ID (prefixing it with cid:) and attaching it to the mail and later referencing this image in the body of the message, this issue can be solved.
This is how we can achieve this, by adding an Image part to a multi part message:
And in your html template you should have
<img src="cid:qrImage" alt="qr code">
That’s it, now Gmail and other mail clients should display all the inline images.
