base64 images not displaying in Outlook when using ejs + emailjs

问题

I'm using a mix of ejs and emailjs to send out emails in my node.js app when various events happen. I'd like to embed a base64 image (a small logo) into the email when it sends, but both Outlook and Gmail (plus Inbox by Google) fail to render the image.

I'm using this bit of code to find the mime type of the image and put together the base64 string:

MyApp.prototype.ImageToBase64 = function(image) {
  var mime = require("mime")
  file = fs.readFileSync(__dirname + "/images/" + image, { encoding: 'base64'})
  return 'data:' + mime.lookup(image) + ';base64,' + file;
}

That works great, because I'm able to copy and paste that resulting string right into my browser and see the image. But when I send the email via emailjs, Outlook converts the +s to +. When I "View Original" in Gmail, the base64 is split up into 'chunks'. Each chunk is on a newline and each line ends with a =. If I take Gmail's version and remove the = and newline then paste it into my browser, the whole picture loads perfectly, but it just refuses to load anywhere else, regardless of whether the user is in my contact list or not.

Here's the code I'm using to send the email:

// Host, username, password and SSL (false) all set above here
server.send({
    text: myTemplate,
    from: "me@example.com",
    to: "someone@example.com",
    subject: "Testing",
    attachment: [
     {data:myTemplate, alternative:true}
    ]
  })

And the template looks like this (truncated, as the other bits aren't important):

  <body>
    <p><img src="<%- ImageToBase64("logo.png") %>"></p>
    <h1><%= Name %> has been triggered</h1>
    <p><%= Name %> has been triggered. It was triggered on <%= TheDate %></p>

Any hints?

EDIT: I tried setting the headers in the "attachment" property, but with no luck

回答1:

Outlook uses Word to render the images, and Word does not support embedded (src="data:image") images.

You need to attach the image as a file and set the Content-ID MIME header to the value matching the cid attribute on the image (<img src="cid:xyz">) in the HTML body.

回答2:

Okay, so even though this answer is from 2013, it seems like the wisdom still holds true, in that base64 image support sucks in email clients.

Basically the only mail clients that still support inline images are either older ones (e.g. Office 2007), or Apple / Android's default mail apps.

While that's a bit disappointing, it's not the end of the world, as the email will only be seen by people on the same network as my app, so I can just point to the image hosted on the web portion of the app.

But for anyone else trying this, host your image on an image sharing site like Imgur or on your own server and use a regular ol' <image> tag to display it.

So much for self-contained emails, right?

来源：https://stackoverflow.com/questions/33140486/base64-images-not-displaying-in-outlook-when-using-ejs-emailjs

标签

node.js

outlook

ejs