Question

我正在向我的会员发送电子邮件，看起来Gmail正在屏蔽我放在电子邮件中的图片。它们作为 base 64编码字符串嵌入到img标记中。我在网上查看了多个关于Gmail不发送图片但没有找到任何有用的内容的主题。以下是我到目前为止尝试过的一些事情。 1.在Gmail中启用外部图像（通过设置图标） 2.将图像的大小减小到8000字节以下（Outlook.com不会发送图像~15000字节）

如果我发送到outlook.com电子邮件地址，我会收到图片，但在Gmail中，img标签的src为空，电子邮件中没有图片显示。我正在使用https://putsmail.com来测试/发送我的电子邮件，因此我知道问题不是SendGrid（我的电子邮件发送服务）或我的应用程序的问题。

以下是我的一个模板。我正在使用来自litmuss的电子邮件模板。下面的所有内容基本上都是默认的，除了我添加的额外信息，如图片和电子邮件正文中的一些额外文字。

这是一个jsfiddle，其中包含一个包含图像数据的完整模板，可以直接复制到putsmail中并发送给测试！任何关于Gmail不发送图片的帮助或信息都会很棒！

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style type="text/css">
        /* FONTS */
        @@media screen {
            @@font-face {
                font-family: 'Lato';
                font-style: normal;
                font-weight: 400;
                src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
            }

            @@font-face {
                font-family: 'Lato';
                font-style: normal;
                font-weight: 700;
                src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v11/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
            }

            @@font-face {
                font-family: 'Lato';
                font-style: italic;
                font-weight: 400;
                src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v11/RYyZNoeFgb0l7W3Vu1aSWOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
            }

            @@font-face {
                font-family: 'Lato';
                font-style: italic;
                font-weight: 700;
                src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v11/HkF_qI1x_noxlxhrhMQYELO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
            }
        }

        /* CLIENT-SPECIFIC STYLES */
        body, table, td, a {
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }

        table, td {
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
        }

        img {
            -ms-interpolation-mode: bicubic;
        }

        /* RESET STYLES */
        img {
            border: 0;
            height: auto;
            line-height: 100%;
            outline: none;
            text-decoration: none;
        }

        table {
            border-collapse: collapse !important;
        }

        body {
            height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
        }

        /* iOS BLUE LINKS */
        a[x-apple-data-detectors] {
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
        }

        /* MOBILE STYLES */
        @@media screen and (max-width:600px) {
            h1 {
                font-size: 32px !important;
                line-height: 32px !important;
            }
        }

        /* ANDROID CENTER FIX */
        div[style*="margin: 16px 0;"] {
            margin: 0 !important;
        }
    </style>
</head>
<body style="background-color: #f4f4f4; margin: 0 !important; padding: 0 !important;">

    <!-- HIDDEN PREHEADER TEXT -->
    <div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: 'Lato', Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
        We're thrilled you created a YogaBandy event! Get ready for members to register.
    </div>

    <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <!-- LOGO -->
        <tr>
            <td bgcolor="#16749F" align="center">
                <!--[if (gte mso 9)|(IE)]>
                <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                <tr>
                <td align="center" valign="top" width="600">
                <![endif]-->
                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
                    <tr>
                        <td align="center" valign="top" style="padding: 40px 10px 40px 10px;">
                            <a href="https://YogaBandy.com" target="_blank">
                                <img alt="Logo" src="http://litmuswww.s3.amazonaws.com/community/template-gallery/ceej/logo.png" width="40" height="40" style="display: block; width: 40px; max-width: 40px; min-width: 40px; font-family: 'Lato', Helvetica, Arial, sans-serif; color: #ffffff; font-size: 18px;" border="0">
                            </a>
                        </td>
                    </tr>
                </table>
                <!--[if (gte mso 9)|(IE)]>
                </td>
                </tr>
                </table>
                <![endif]-->
            </td>
        </tr>
        <!-- HERO -->
        <tr>
            <td bgcolor="#16749F" align="center" style="padding: 0px 10px 0px 10px;">
                <!--[if (gte mso 9)|(IE)]>
                <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                <tr>
                <td align="center" valign="top" width="600">
                <![endif]-->
                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
                    <tr>
                        <td bgcolor="#ffffff" align="center" valign="top" style="padding: 40px 20px 20px 20px; border-radius: 4px 4px 0px 0px; color: #111111; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; letter-spacing: 4px; line-height: 48px;">
                            <h2 style="font-size: 48px; font-weight: 400; margin: 0;">Event Created</h2>
                        </td>
                    </tr>
                </table>
                <!--[if (gte mso 9)|(IE)]>
                </td>
                </tr>
                </table>
                <![endif]-->
            </td>
        </tr>
        <!-- COPY BLOCK -->
        <tr>
            <td bgcolor="#f4f4f4" align="center" style="padding: 0px 10px 0px 10px;">
                <!--[if (gte mso 9)|(IE)]>
                <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                <tr>
                <td align="center" valign="top" width="600">
                <![endif]-->
                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
                    <!-- COPY -->
                    <tr>
                        <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
                            <p style="margin: 0;">We're excited you have created an event. Here are some of the details below.</p>
                        </td>
                    </tr>
                    <!-- Host Space -->
                    <tr>
                        <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
                            <p style="margin: 0;">
                                <a href="https://www.YogaBandy.com/Space/Public/@Model.SpaceId" target="_blank" class="thumbnail" style="margin-bottom: 0px;">
                                    <img alt="SpaceImage" title="Space Image" style="display: block" width="225" height="126" src="data:image/jpg;base64,@Raw(Model.SpaceThumbnail)" />
                                    <div class="caption">
                                        @Model.SpaceName
                                    </div>
                                </a>
                            </p>
                        </td>
                    </tr>
                    <!-- Host Image -->
                    <tr>
                        <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
                            <p style="margin: 0;">
                                <a href="https://www.YogaBandy.com/Profile/Public/@Model.HostId" target="_blank" class="thumbnail" style="margin-bottom: 0px;">
                                    <img alt="HostImage" title="Host Image" style="display: block" width="225" height="225" src="data:image/jpg;base64,@Raw(Model.HostThumbnail)" />
                                    <div class="caption">
                                        @Model.HostName
                                    </div>
                                </a>
                            </p>
                        </td>
                    </tr>
                    <!-- DATE -->
                    <tr>
                        <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
                            <p style="margin: 0;">@Model.Date.ToLongDateString()</p>
                        </td>
                    </tr>
                    <!-- TIME -->
                    <tr>
                        <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
                            <p style="margin: 0;">
                                <div>Time: @Model.Date.ToShortTimeString()</div>
                            </p>
                        </td>
                    </tr>
                    <!-- Location -->
                    <tr>
                        <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
                            <p style="margin: 0;">@Model.Location</p>
                        </td>
                    </tr>
                    <!-- DURATION -->
                    <tr>
                        <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
                            <p style="margin: 0;">@Model.Duration</p>
                        </td>
                    </tr>
                    <!-- STYLE -->
                    <tr>
                        <td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
                            <p style="margin: 0;">@Model.Style</p>
                        </td>
                    </tr>
                    <!-- BULLETPROOF BUTTON -->
                    <tr>
                        <td bgcolor="#ffffff" align="left">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td bgcolor="#ffffff" align="center" style="padding: 20px 30px 60px 30px;">
                                        <table border="0" cellspacing="0" cellpadding="0">
                                            <tr>
                                                <td align="center" style="border-radius: 3px;" bgcolor="#16749F"><a href="" target="_blank" style="font-size: 20px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; padding: 15px 25px; border-radius: 2px; border: 1px solid #16749F; display: inline-block;">Add To Calendar</a></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    
                    
                    <!-- COPY -->
                    <tr>
                        <td bgcolor="#ffffff" align="left" style="padding: 0px 30px 20px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
                            <p style="margin: 0;">If you have any questions, just send an email to the support address—we're always happy to help out.</p>
                        </td>
                    </tr>
                    <!-- COPY -->
                    <tr>
                        <td bgcolor="#ffffff" align="left" style="padding: 0px 30px 40px 30px; border-radius: 0px 0px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
                            <p style="margin: 0;">Cheers,<br>The YogaBandy Team</p>
                        </td>
                    </tr>
                </table>
                <!--[if (gte mso 9)|(IE)]>
                </td>
                </tr>
                </table>
                <![endif]-->
            </td>
        </tr>
        <!-- SUPPORT CALLOUT -->
        <tr>
            <td bgcolor="#f4f4f4" align="center" style="padding: 30px 10px 0px 10px;">
                <!--[if (gte mso 9)|(IE)]>
                <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                <tr>
                <td align="center" valign="top" width="600">
                <![endif]-->
                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
                    <!-- HEADLINE -->
                    <tr>
                        <td bgcolor="#157b9d" align="center" style="padding: 30px 30px 30px 30px; border-radius: 4px 4px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
                            <h2 style="font-size: 20px; font-weight: 400; color: #111111; margin: 0;">Need more help?</h2>
                            <p style="margin: 0;"><a href="https://YogaBandy/Contact.com" target="_blank" style="color: #FFFFFF;">We&rsquo;re here, ready to help</a></p>
                        </td>
                    </tr>
                </table>
                <!--[if (gte mso 9)|(IE)]>
                </td>
                </tr>
                </table>
                <![endif]-->
            </td>
        </tr>
        <!-- FOOTER -->
        <tr>
            <td bgcolor="#f4f4f4" align="center" style="padding: 0px 10px 0px 10px;">
                <!--[if (gte mso 9)|(IE)]>
                <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
                <tr>
                <td align="center" valign="top" width="600">
                <![endif]-->
                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
                    <!-- NAVIGATION -->
                    <!-- PERMISSION REMINDER -->
                    <tr>
                        <td bgcolor="#f4f4f4" align="left" style="padding: 0px 30px 30px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 18px;">
                            <p style="margin: 0;">You received this email because you just created a YogaBandy event. If it looks weird, <a href="https://YogaBandy.com" target="_blank" style="color: #111111; font-weight: 700;">view it in your browser</a>.</p>
                        </td>
                    </tr>
                    <!-- UNSUBSCRIBE -->
                    <!-- ADDRESS -->

                </table>
                <!--[if (gte mso 9)|(IE)]>
                </td>
                </tr>
                </table>
                <![endif]-->
            </td>
        </tr>
    </table>

</body>
</html>

Answer 1

Google拒绝在Gmail的网络界面中显示包含数据网址的图片。长期以来，这是一个众所周知的问题（谷歌认为是一种安全措施）。

好消息是除了使用外部图像外，还有其他选择。

使用带有Content-ID的内联附件可与Gmail配合使用。

将图片添加为内嵌附件后，您需要在html正文中指出CID URLs而不是Data URLs。

有很多现代化的图书馆可以让您轻松发送带有内嵌附件的电子邮件。但我在VBScript中用CDO库编写了一个示例脚本，如果你安装了Windows 2000+，就可以使用了。

让我们准备测试环境。

将文件放在目录中，如下面的屏幕截图所示。

tpl.html是您提供的模板文件。您需要在此文件中进行一些更改。

分别用以下内容替换img个元素。请注意，数据网址已消失。 image1和image2是为脚本中的每个内联附件指定的内容ID。这里与文件名无关。

<img src="cid:image1" alt="SpaceImage" title="Space Image" style="display: block" width="225" height="126" />
<img src="cid:image2" alt="HostImage" title="Host Image" style="display: block" width="225" height="225" />

<强> Embedded.vbs：

MsgBox "Wait while your email is being sent.", vbOKOnly Or vbInformation

'************ CONFIGURATION *************
Const smtpUsername = "..."
Const smtpPassword = "..."
Const smtpHost = "smtp.sendgrid.net"
Const smtpPort = 587
Const senderEmail = "...@..."
Const recipientEmail = "...@gmail.com"
'************ CONFIGURATION *************

Const cdoRefTypeId = 0

Set Fso = CreateObject("Scripting.FileSystemObject")

Set objMail = CreateObject("CDO.Message")
With objMail.Configuration
    .Fields("http://schemas.microsoft.com/cdo/configuration/smtpauthenticate") = 1
    .Fields("http://schemas.microsoft.com/cdo/configuration/sendusername") = smtpUsername
    .Fields("http://schemas.microsoft.com/cdo/configuration/sendpassword") = smtpPassword
    .Fields("http://schemas.microsoft.com/cdo/configuration/smtpserver") = smtpHost
    .Fields("http://schemas.microsoft.com/cdo/configuration/smtpserverport")  = smtpPort
    .Fields("http://schemas.microsoft.com/cdo/configuration/sendusing") = 2
    .Fields("http://schemas.microsoft.com/cdo/configuration/smtpconnectiontimeout") = 20 'secs
    .Fields.Update
End With

With objMail
    .AutoGenerateTextBody = False
    .From = senderEmail
    .To = recipientEmail
    .Subject = "Inline Image Test"
    .BodyPart.ContentTransferEncoding = "quoted-printable"
    .BodyPart.Charset = "utf-8"

    'Adding images as inline attachments with Content IDs which is used with image sources. e.g. <img src="cid:image1"
    .AddRelatedBodyPart Fso.GetAbsolutePathName("image1.jpg"), "image1", cdoRefTypeId
    .AddRelatedBodyPart Fso.GetAbsolutePathName("image2.jpg"), "image2", cdoRefTypeId

    'append html body from file
    .HTMLBody = Fso.OpenTextFile("tpl.html").ReadAll
    .Send
End With

MsgBox "Email successfully sent! Check your inbox.", vbOKOnly Or vbInformation

双击并等待说明。

另见https://stackoverflow.com/search?q=is%3Aquestion+%5Bemail%5D+inline+image

Answer 2

<强> TL;博士

Gmail和某些其他客户不喜欢base64编码图像。

全文

我做的第一件事就是在Gmail中查看“Show Original”。令我惊讶的是，原始内容仍然包含您的嵌入图像数据：

立刻告诉我，gmail只是选择过滤掉这些内容。我无法找到原因。一些猜测指出了length of encoded data itself。其他人谈论Gmail filters out images的一般方式。甚至有这种技术的记录functioning a number of years back。

此外，在牛顿（以前称为Cloud Magic）等第三方客户端查看完全相同的电子邮件时，我确实看到了正确呈现的图像。

所有这些都指向一个简单但令人遗憾的事实，即gmail不喜欢内联编码图像。不在浏览器中，也不在移动应用程序中。

事实上，在最后，我确实发现了2013 by Campaign Monitor blog的帖子，结果相同。

请勿使用嵌入式嵌入图像。

Answer 3

经过多次试验和失败，我找到了 Gmail 不显示内嵌图片的原因。最初我使用这个 html:

"Some HTML text and an image \<img src="cid:image1"\>Nifty!"

用这个命令附上图片（在python中，但细节不重要）：

msg.add_related(img.read(), 'image', 'png', cid='image1')

它适用于大多数电子邮件客户端，但不适用于 Gmail android 应用和 Gmail 网络。当我最终将其更改为：

 msg.add_related(img.read(), 'image', 'png', cid='\<image1\>')

它适用于 Outlook、Android 电子邮件、Android Gmail 和 Gmail 网络。这个错误在很多python库的例子中重复出现。

Answer 4

你在使用 nodemailer 吗？

如果是，就有解决方案！

NPM 有一个名为 nodemailer-plugin-inline-base64 的包，它允许您将带有数据 uri 的图像发送到所有电子邮件提供商，例如 gmail、outlook 等。

设置：

yarn add nodemailer nodemailer-plugin-inline-base64

试试看

var nodemailer = require('nodemailer');
var inlineBase64 = require('nodemailer-plugin-inline-base64');
transporter.use('compile', inlineBase64({cidPrefix: 'somePrefix_'}));
transporter.sendMail({
    from: 'me@example.com',
    to: 'hello@mixmax.com',
    html: '&lt;img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAACCAYAAACE7KJkAAAAI0lEQVRYR+3DMQ0AAAgDsKlFzZxgEhOcbdIEAIBf7Y6qqn8P0MMQZPno7TMAAAAASUVORK5CYII=">'
});

祝您有美好的一天！

Gmail会阻止电子邮件模板中的小型嵌入式内嵌图像

4 个答案: