如何使用 MailApp 在电子邮件中包含内联图像答案

【问题标题】：How to include inline images in email using MailApp如何使用 MailApp 在电子邮件中包含内联图像
【发布时间】：2016-07-10 18:08:10
【问题描述】：

我有一个简单的 MailApp 来发送 HTML 格式的文本。我的小问题是：如何在该文本中插入内联图像？例如，我想为荷兰文文本添加荷兰国旗，为法语内容添加法国国旗。

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

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

【问题讨论】：

标签： email google-apps-script gmail inline-images

【解决方案1】：

sendEmail(message) 的文档展示了如何将两个徽标作为内嵌图像添加到电子邮件中。

这是对 Google 示例的改编，它将在您的文本块之前加上其语言环境标志。它使用来自 Wikimedia 的图像，这些图像在 Creative Commons 下免费获得许可。

其工作原理的关键是：

电子邮件正文中的 HTML <img> 标记使用 src='cid:[name]' 来引用附加图像。这些是 Content-ID 通用资源定位器，它们引用多部分电子邮件消息的部分。
您可以在<img> 标签上使用内联style 来告诉邮件客户端如何显示它们。例如，我们已经缩放了附加的图像。（注意：使用所需尺寸的自定义图像会减少浪费。）
当电子邮件被编码以便发送时，每个附加的图像都将位于其自己的部分中，并标有您在inlineImages 对象中提供的cid。此对象是 sendMail() 方法的高级参数对象的一部分。

在这里，我们有两个cids、nlFlag 和frFlag，每个都与一个file Blob 相关联。
```
inlineImages:
{
  nlFlag: nlFlagBlob,
  frFlag: frFlagBlob
}
```
可以通过多种方式获取文件 blob；在这里，我们使用UrlFetchApp.fetch() 从维基媒体获取二进制图像，然后将它们转换为 blob 并设置要附加的 blob 的名称。

代码：

/**
 * 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 替换为GmailApp，效果非常棒！如果有人需要我可以提供的示例。

【解决方案2】：

来自 MailApp 文档：

htmlBody String 如果设置，能够呈现 HTML 的设备将使用它而不是必需的正文参数；你可以添加一个可选的如果您有内联图像，则 HTML 正文中的 inlineImages 字段电子邮件

inlineImages Object 一个包含映射的 JavaScript 对象从图像键（字符串）到图像数据（BlobSource）；这假设使用 htmlBody 参数并包含对这些图像的引用格式

因此您需要将图像添加到 inlineImages 高级参数中，并在编写 HTML 消息时引用图像键。

【讨论】：