When sending an email with meteorjs, the base64 inline image is not displayed correctly

Question

Current situation:

(Client side) The template:

<template name="feedback">
    <h1>The Image</h1>
    <img src="{{image}}" alt=""/>
</template>

(Client side) Calling the mail function:

var dataContext={
    image: canvas.toDataURL('image/png')
};
var html=Blaze.toHTMLWithData(Template.feedback, dataContext);

Meteor.call('feedback', html);

(Server side):

Email.send({
    to: 'xxx',
    from: 'xxx',
    subject: 'xxx',
    html: html
});

Expected result: A nice email with an embedded image.

Actual result: I get a mail partially html, partially 'raw' text. I have no clue to why.

This is a part of what I see in the raw email:

Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: quoted-printable

<h1>The Image</h1>
=20=20=20=20<img =
src=3D"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAALKCAYAAADTWUxrAA

Any ideas?

Answer 1

Gmail, as well as many other clients, do not allow you to use base64 as a source in an img tag. There are ways around this though:

First and easiest might be to just keep the image on your server and put a url into the image source tag. This has the added benefit of being able to handle some tracking (some additional development required).

Second would be to use a third party mail system and send them the image and the HTML and set it up this way. This might be good for a number of reasons but it doesn't really answer your question.

Finally you can do this in an email template like you have by adding a multipart multitype boundary solution very similar to this answer:

base64 encoded images in email signatures