如何在Google Apps Script发送邮件功能中设置HTML背景图片

• 邮件客户端的HTML渲染逻辑和浏览器差异极大：默认会拦截所有外部引入的JS、CSS资源，你代码里引入的jQuery、BootstrapCSS都不会生效，同时绝大多数客户端不支持<head>内<style>标签中定义的body背景属性，普通网页的前端写法几乎不适用于邮件场景。
• background-image: url('cid:https://miyagen8.co.jp/wp-content/uploads/2021/11/background.png')写法错误：cid:前缀仅用于关联邮件内嵌的附件资源，不能直接拼接外部图片URL。

方案1：使用公开可访问的图片直连（无需修改GAS发送逻辑） #

邮件HTML统一使用table布局，所有样式写为行内样式，背景属性直接绑定到最外层table节点上，兼容绝大多数邮件客户端：

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body style="margin:0;padding:0;">
  <!-- 最外层table承载背景，所有背景属性行内定义 -->
  <table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-image: url('https://miyagen8.co.jp/wp-content/uploads/2021/11/background.png');background-size: cover;background-repeat: no-repeat;background-position: top center;">
    <tr>
      <td>
        <div style="padding: 20px;">
          <p> <?= client.company ?> </p>
          <p> <?= client.department ?> </p>
          <p> <?= client.derector ?> </p>
          <p> <?= client.name ?>様 </p>
          <p>いつもお世話になります。</p>
          <p>Text body</p>
        </div>
      </td>
    </tr>
  </table>
</body>
</html>

注意：需要保证你的背景图片地址是公开可访问的，没有访问权限限制。

方案2：使用内嵌附件（更稳定，不会被图片拦截规则影响） #

需要同步修改你的Google Apps Script发送邮件的代码，先把背景图作为内嵌附件添加到邮件中，再在HTML模板中使用cid关联：
GAS发送代码示例：

function sendMail() {
  // 抓取背景图资源
  const backgroundImg = UrlFetchApp.fetch("https://miyagen8.co.jp/wp-content/uploads/2021/11/background.png").getBlob().setName("mailBg.png");
  // 渲染你的HTML模板
  const htmlBody = HtmlService.createTemplateFromFile("你的模板文件名").evaluate().getContent();
  // 发送邮件
  GmailApp.sendEmail(
    "收件人邮箱",
    "邮件标题",
    "",
    {
      htmlBody: htmlBody,
      inlineImages: {
        "mailBg": backgroundImg // 这里的key对应模板里cid的名称
      }
    }
  )
}

对应修改HTML模板里的背景样式即可：

background-image: url('cid:mailBg');

内容的提问来源于stack exchange，提问作者Miyagen Co Ltd