如何使用 MailApp 在电子邮件中包含内嵌图像 [英] How to include inline images in email using MailApp

问题描述

我有一个简单的 MailApp 来发送 HTML 格式的文本.我有一个小问题:如何在该文本中插入内嵌图像?例如，我想为荷兰语文本添加一个荷兰语标志，为法语内容添加一个法语标志.

我认为只使用 HTML 代码就可以完成这项工作.但可惜，没有这样的运气.这只是我需要的一个小图像，内容下方没有大图像.我怎样才能做到这一点?

MailApp.sendEmail(mailaddress, subject, "" ,{ htmlBody: bodyNL + bodyFR })

解决方案

其工作原理的关键是:

电子邮件正文中的
• HTML 标记使用 src='cid:[name]' 来引用附加的图像.这些是Content-ID 通用资源定位器，它们引用多部分电子邮件消息的部分.
• 您可以在 标签上使用内联 style 来告诉邮件客户端如何显示它们.例如，我们缩放了附加的图像.(注意:使用所需大小的自定义图像会减少浪费.)

• 当电子邮件被编码用于发送时，每个附加的图像都将在其自己的部分中，标有您在 中提供的 cid>inlineImages 对象.此对象是 sendMail() 方法的高级参数对象的一部分.

  这里，我们有两个 cid，nlFlag 和 frFlag，每个都与一个 文件 Blob.

  inlineImages:{nlFlag: nlFlagBlob,frFlag: frFlagBlob}

• 文件 blob 可以通过多种方式获得；这里我们使用 UrlFetchApp.fetch() 从 WikiMedia 获取二进制图像，然后将它们转换为 blob 并设置 blob 的名称以进行附加.

代码:

/*** 发送带有内嵌图像的 HTML 电子邮件的示例.* 来自:http://stackoverflow.com/a/37688529/1677912*/函数 sendInlineImages() {var mailaddress = Session.getActiveUser().getEmail();var subject = "测试内嵌图片";var bodyNL = "这是<B>DUTCH</B>文本.";var bodyFR = "这是<B>FRENCH</B>文本.";//图片 URL，在 CC 许可下var nlFlagUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Flag_of_the_Netherlands.png/320px-Flag_of_the_Netherlands.png";var frFlagUrl = "https://upload.wikimedia.org/wikipedia/en/thumb/c/c3/Flag_of_France.svg/320px-Flag_of_France.svg.png";//将图像作为 blob 获取，为附件设置名称var nlFlagBlob = UrlFetchApp.fetch(nlFlagUrl).getBlob().setName("nlFlagBlob");var frFlagBlob = UrlFetchApp.fetch(frFlagUrl).getBlob().setName("frFlagBlob");//为电子邮件添加嵌入的图像标签bodyNL = "<img src='cid:nlFlag' style='width:24px; height:16px;'/>"+ bodyNL;bodyFR = "<img src='cid:frFlag' style='width:24px; height:16px;'/>"+ bodyFR;//使用 inlineImages 对象发送消息，匹配嵌入的标签.MailApp.sendEmail(mailaddress, subject, "",{ htmlBody: bodyNL + "<BR/><BR/>"+ bodyFR，内联图片:{nlFlag: nlFlagBlob,frFlag: frFlagBlob}});}

I have a simple MailApp to send text in HTML format. The small question I have is: How do I insert inline images in that text? For example, I want to add a Dutch flag for the Dutch text, and a French flag for the French content.

I assumed just using HTML code would do the job. But alas, no such luck. It's just a tiny image I need, no big images below the content. How can I accomplish this?

MailApp.sendEmail(mailaddress, subject, "" ,
              { htmlBody: bodyNL + bodyFR })

解决方案

The documention for sendEmail(message) shows how to add two logos to an email as inline images.

Here's an adaptation from Google's example that will prepend your text blocks with their locale flags. It uses images from Wikimedia, which are freely licensed under Creative Commons.

The keys to how this works are:

• HTML <img> tags in the email body use src='cid:[name]' to reference attached images. These are Content-ID Universal Resource Locators, which reference parts of multipart email messages.
• You can use inline style on the <img> tags to tell the mail client how to display them. For example, we've scaled the attached images. (Note: it would be less wasteful to use custom images that are the exact size needed.)

• When the email is encoded for sending, each attached image will be in its own part, labelled with the cid you've provided in the inlineImages object. This object is part of the advanced parameters object for the sendMail() method.

  Here, we have two cids, nlFlag and frFlag, each associated with a file Blob.

  inlineImages:
  {
    nlFlag: nlFlagBlob,
    frFlag: frFlagBlob
  }
  

• File blobs can be obtained in many ways; here we've used UrlFetchApp.fetch() to get the binary images from WikiMedia, then converted them to blobs and set the name of the blob for attaching.

Code:

/**
 * Example of sending an HTML email message with inline images.
 * From: http://stackoverflow.com/a/37688529/1677912
 */
function sendInlineImages() {
  var mailaddress = Session.getActiveUser().getEmail();
  var subject = "test inline images";
  var bodyNL = "This is <B>DUTCH</B> text.";
  var bodyFR = "This is <B>FRENCH</B> text.";

  // Image URLs, under CC license
  var nlFlagUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Flag_of_the_Netherlands.png/320px-Flag_of_the_Netherlands.png";
  var frFlagUrl = "https://upload.wikimedia.org/wikipedia/en/thumb/c/c3/Flag_of_France.svg/320px-Flag_of_France.svg.png";

  // Fetch images as blobs, set names for attachments
  var nlFlagBlob = UrlFetchApp
                            .fetch(nlFlagUrl)
                            .getBlob()
                            .setName("nlFlagBlob");
  var frFlagBlob = UrlFetchApp
                            .fetch(frFlagUrl)
                            .getBlob()
                            .setName("frFlagBlob");

  // Prepend embeded image tags for email
  bodyNL = "<img src='cid:nlFlag' style='width:24px; height:16px;'/>" + bodyNL;
  bodyFR = "<img src='cid:frFlag' style='width:24px; height:16px;'/>" + bodyFR;

  // Send message with inlineImages object, matching embedded tags.
  MailApp.sendEmail(mailaddress, subject, "",
                    { htmlBody: bodyNL + "<BR/><BR/>" + bodyFR,
                      inlineImages:
                      {
                        nlFlag: nlFlagBlob,
                        frFlag: frFlagBlob
                      }
                    });

}

这篇关于如何使用 MailApp 在电子邮件中包含内嵌图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！