使用 GmailApp 的内联图像可以正常工作，但没有附加到我期望的位置。

Question

我正在使用独立的 Google Apps 脚本发送格式化的 HTML 电子邮件。我正在尝试将内联图像附加到格式化的 HTML 文件，电子邮件运行良好，图像在电子邮件中内联，但它们内联在电子邮件的最底部，而不是我想要的位置他们是。

我正在使用的脚本就在下面，HTML 电子邮件在下面。

    function sendInlineImages() {
  var email = [Email address]
  var subject = "Email Subject";
  var body= HtmlService.createHtmlOutputFromFile('moving').getContent();

  // Image URLs, under CC license
  var jasper1URL = "http://cat-bounce.com/cb.png";
  var jasper2URL = "http://cat-bounce.com/cb.png";
  var jasper3URL = "http://cat-bounce.com/cb.png";

  // Fetch images as blobs, set names for attachments
  var jasper1 = UrlFetchApp
                            .fetch(jasper1URL)
                            .getBlob()
                            .setName("jasper1URL");
  var jasper2 = UrlFetchApp
                            .fetch(jasper2URL)
                            .getBlob()
                            .setName("jasper2URL");
  var jasper3 = UrlFetchApp
                            .fetch(jasper3URL)
                            .getBlob()
                            .setName("jasper3URL");

  var htmlEverything = body + 
    '<img src="cid:jasper1URL" alt="Jasper 1" width="220">' 
  + '<img src="cid:jasper2URL" alt="Jasper 2" width="220">'
  + '<img src="cid:jasper3URL" alt="Jasper 3" width="200">' 

  // Send message with inlineImages object, matching embedded tags.
  GmailApp.sendEmail(email, subject, "",
                    { htmlBody: htmlEverything,
                      inlineImages:
                      {
                        jasper1URL: jasper1,
                        jasper2URL: jasper2,
                        jasper3URL: jasper3,
                      }
                    });

}

HTML 电子邮件在这里，图像位于嵌套 table。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="format-detection" content="telephone=no"/> 
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'/>

    <title>Page title</title>

    <style type="text/css"> 
        @media screen and (max-width: 630px) {

        }
    </style>


</head>

<body style="padding:0; margin:0">

<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0" width="630px">
    <tr>
        <td align="center" valign="top" style="padding-bottom: 15px;" bgcolor="#fff">

        </td>
    </tr>
    <tr>
        <td align="center" valign="top" bgcolor="#000" style="padding-bottom: 5px; font-family: Montserrat, Verdana, sans-serif; font-size: 24px;">
            <h1><font color="#fff">Information for you!</font></h1>
            <h4><font color ="#fff">Additional Stuff
                <p>From,</p>
                <p>Me</p>

            </font></h4>
        </td>
    </tr>
    <tr>
        <td align="center" valign="top" style="padding-bottom: 15px;" bgcolor="#d3d3d3">

        </td>
    </tr>
    <tr bgcolor="#000">
        <td align="center" valign="top">
            <table border="0" cellpadding="10" bgcolor="#000" cellspacing="0" width="630" id="emailContainer">
                <tr>
                    <td align="left" valign="top" >
                        <img src="cid:jasper1URL" alt="Jasper 1" width="220"></img>
                    </td>
                    <td align="center" valign="top" width="200">
                        <img src="cid:jasper2URL" alt="Jasper 2" width="200"></img>
                    </td>
                    <td align="right" valign="top" width="200px" >
                        <img src="cid:jasper3URL" alt="Jasper 3" width="200"></img>
                    </td>
                </tr>
            </table>
        </td>

    </tr>

    <tr>
        <td align="center" bgcolor="#000" valign="top">

        </td>
    </tr>
    <tr>
        <td align="center" bgcolor="#d3d3d3" valign="top" style="padding-top: 15px; padding-bottom: 15px; font-family: Monteserrat, Verdana, sans-serif;">
            <font color="#000">Stuff that should be here in the email</font>
        </td>
    </tr>
    <tr>
        <td align="center" bgcolor="#000" valign="top">

        </td>
    </tr>

</table>

</body>
</html>

Answer 1

由于以下代码，它们出现在电子邮件的末尾：

var htmlEverything = body + 
    '<img src="cid:jasper1URL" alt="Jasper 1" width="220">' 
  + '<img src="cid:jasper2URL" alt="Jasper 2" width="220">'
  + '<img src="cid:jasper3URL" alt="Jasper 3" width="200">'

您的 Html 代码已经定义了图像在嵌套 table 中的位置，方法是将 img 标签添加到 html 代码的末尾，如上所示。您导致内联图像被复制到电子邮件底部。

修改为

var htmlEverything = body

这应该可以防止图像出现在电子邮件的底部

你的最终代码：

function sendInlineImages() {
  var email = [Email address]
  var subject = "Email Subject";
  var body= HtmlService.createHtmlOutputFromFile('moving').getContent();

  // Image URLs, under CC license
  var jasper1URL = "http://cat-bounce.com/cb.png";
  var jasper2URL = "http://cat-bounce.com/cb.png";
  var jasper3URL = "http://cat-bounce.com/cb.png";

  // Fetch images as blobs, set names for attachments
  var jasper1 = UrlFetchApp
                            .fetch(jasper1URL)
                            .getBlob()
                            .setName("jasper1URL");
  var jasper2 = UrlFetchApp
                            .fetch(jasper2URL)
                            .getBlob()
                            .setName("jasper2URL");
  var jasper3 = UrlFetchApp
                            .fetch(jasper3URL)
                            .getBlob()
                            .setName("jasper3URL");

  var htmlEverything = body

  // Send message with inlineImages object, matching embedded tags.
  GmailApp.sendEmail(email, subject, "",
                    { htmlBody: htmlEverything,
                      inlineImages:
                      {
                        jasper1URL: jasper1,
                        jasper2URL: jasper2,
                        jasper3URL: jasper3,
                      }
                    });

}

您的 Html 代码保持不变！

使用 GmailApp 的内联图像可以正常工作，但没有附加到我期望的位置。

inline images using GmailApp working, but not attached where I expect them to be.

html

google-apps-script

gmail

html-email

inline-images