Gmail 阻止电子邮件模板中嵌入的小型嵌入式图像-前端问题

Gmail blocking small embedded inline images in email template(Gmail 阻止电子邮件模板中嵌入的小型嵌入式图像)

本文介绍了Gmail 阻止电子邮件模板中嵌入的小型嵌入式图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在向我的成员发送电子邮件，但 Gmail 似乎阻止了我在电子邮件中放置的图像.这些作为 base 64 编码 字符串嵌入到 img 标记中.我在网上查看了多个关于 Gmail 不发送图片的帖子，但没有发现任何有用的信息.以下是我迄今为止尝试过的一些事情.1. 在 Gmail 中启用外部图片(通过设置图标)2. 将图片大小减少到 8000 字节以下(Outlook.com 不会发送图片 ~ 15000 字节)

如果我发送到 Outlook.com 电子邮件地址，我会很好地收到图像，但在 Gmail 中，img 标签的 src 是空的，并且电子邮件中没有图像显示.我正在使用

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

将两个 img 元素分别替换为以下内容.请注意，数据网址消失了.image1 和 image2 是为脚本中每个内联附件指定的内容 ID.此处没有与文件名相关的内容.

Embedded.vbs:

MsgBox "等待您的电子邮件正在发送.", vbOKOnly 或 vbInformation'************ 配置 *************const smtpUsername = ..."const smtpPassword = ..."const smtpHost = smtp.sendgrid.net"常量 smtpPort = 587常量 senderEmail = ...@..."常量收件人电子邮件=...@gmail.com"'************ 配置 *************常量 cdoRefTypeId = 0设置 Fso = CreateObject("Scripting.FileSystemObject")设置 objMail = CreateObject("CDO.Message")使用 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 秒.Fields.Update结束于使用 objMail.AutoGenerateTextBody = False.From = senderEmail.To = 收件人电子邮件.Subject =在线图像测试".BodyPart.ContentTransferEncoding = "quoted-printable";.BodyPart.Charset = "utf-8";' 将图像添加为带有内容 ID 的内联附件，该内容 ID 与图像源一起使用.例如<img src=cid:image1";..>.AddRelatedBodyPart Fso.GetAbsolutePathName("image1.jpg"), "image1", cdoRefTypeId.AddRelatedBodyPart Fso.GetAbsolutePathName("image2.jpg"), "image2", cdoRefTypeId'从文件中追加html正文.HTMLBody = Fso.OpenTextFile("tpl.html").ReadAll.发送结束于MsgBox "邮件发送成功！检查您的收件箱."，vbOKOnly 或 vbInformation

双击等待指示.

另请参阅 https://stackoverflow.com/search?q=is%3Aquestion+%5Bemail%5D+内联+图片

I'm sending emails to my members and it looks like Gmail is blocking the images I place in the email. These are embedded as a base 64 encoded string in an img tag. I've looked at multiple threads online about Gmail not sending images but haven't found anything that helps. Here are some of the things I've tried so far. 1. enabled external images in Gmail (through the settings icon) 2. reduced the size of the images to under 8000 bytes (Outlook.com wouldn't send images ~ 15000 bytes)



I receive the images just fine if I send to an outlook.com email address, but in Gmail the src of the img tag is empty, and no images show up in the email.
I'm using https://putsmail.com to test/send my emails, so I know the issue isn't a problem with SendGrid (my email sending service) or my application.

Here is one of my templates below. I'm using an email template from litmuss. Everything below is basically default except the extra info I've added like the images and some extra text in the email body.

Here is a jsfiddle with a complete template with image data that can be copied right into putsmail and be sent to test! Any help or info as to why Gmail doesn't send the images would be great!



<!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>



 解决方案 
Google refuses to show images with data url in Gmail's web interface. It's a known problem (in Google's view a security measure) for a long time highly criticized.
The good news is that you have another option except for using external images.
Using an inline attachment with a Content-ID works with Gmail.
After adding your images as inline attachments you'll need to point CID URLs instead of Data URLs in the html body.
There are plenty of modern libraries that will allow you to send emails with inline attachments easily. But I wrote a sample script in VBScript with CDO library, ready to use if you have a box Windows 2000+ installed.
Let's prepare the test environment.
Put the files in a directory as in the screenshot below.

tpl.html is the template file you gave. You'll need to make some changes in this file.
Replace both img elements with the following respectively. Note that data urls gone. image1 and image2 are the Content IDs specified for each inline attachments in the script. Nothing associated with file names here.
<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
Double click and wait for instructions.
See also https://stackoverflow.com/search?q=is%3Aquestion+%5Bemail%5D+inline+image

                        这篇关于Gmail 阻止电子邮件模板中嵌入的小型嵌入式图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

问题描述

基础教程推荐