问题：
Gmail阻止电子邮件模板中嵌入的小内嵌图像
顾高扬
我正在向我的会员发送电子邮件，看起来Gmail正在阻止我在电子邮件中放置的图像。它们作为base64编码字符串嵌入到img标记中。我在网上看过多条关于Gmail不发送图片的帖子，但没有发现任何有用的东西。以下是我到目前为止尝试过的一些东西。1.在Gmail中启用外部图像（通过设置图标）2。将图像大小减少到8000字节以下（Outlook.com不会发送约15000字节的图像）
如果我发送到outlook，我会很好地接收图像。com电子邮件地址，但在Gmail中，img标签的src是空的，并且电子邮件中没有显示任何图像。我正在使用https://putsmail.com测试/发送我的电子邮件，这样我知道问题不是SendGrid（我的电子邮件发送服务）或我的应用程序的问题。
下面是我的一个模板。我正在使用litmuss的电子邮件模板。下面的所有内容基本上都是默认的，除了我添加的额外信息，如图片和电子邮件正文中的一些额外文本。
这是一个JSFIDLE，它有一个完整的模板，其中包含可以直接复制到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’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>共有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 web。当我最终将其更改为：
msg.add_related(img.read(), 'image', 'png', cid='\<image1\>')
它是工作在Outlook， Android电子邮件， Android Gmail和Gmail网络。这个错误在许多python库的例子中重复出现。
魏雅惠
tl； dr
Gmail和某些其他客户不喜欢base64编码图像。
完整故事
我做的第一件事是在Gmail中查看“显示原创”。令我惊讶的是，原始内容仍然有你嵌入的图像数据：
这立刻告诉我，gmail只是选择过滤掉这些内容。我找不到原因。一些猜测指出了编码数据本身的长度。其他人谈论Gmail过滤图像的一般方式。几年前甚至有这种技术发挥作用的记录。
此外，当在第三方客户机（如Newton（以前的Cloud Magic））中查看相同的电子邮件时，我确实可以看到正确渲染的图像。
所有这些都表明了一个简单但令人悲伤的事实，即gmail不喜欢内嵌编码的图像。不在浏览器中，也不在其移动应用程序中。
事实上，在最后，我确实发现了Campaign Monitor博客2013年的一篇文章，得出了相同的结论。
不要使用内嵌图像。
金瑞
谷歌拒绝在Gmail的网页界面上显示带有数据网址的图片。这是一个众所周知的问题（在谷歌看来是一项安全措施），长期以来受到高度批评。
好消息是，除了使用外部图像，您还有其他选择。
使用带有内容ID的内联附件可用于Gmail。
将图像作为内联附件添加后，需要在html正文中指向CID URL而不是数据URL。
有很多现代化的库可以让你轻松地发送带有内联附件的电子邮件。但我用带有CDO库的VBScript编写了一个示例脚本，如果安装了Windows 2000，就可以使用它。
让我们准备测试环境。
将文件放在下面截图中的目录中。
tpl.html是您给出的模板文件。您需要对此文件进行一些更改。
将两个img元素分别替换为以下内容。注意，数据URL消失了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" />
嵌入的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:question[电子邮件]内联图像
类似资料：
-
问题内容： 我正在发送带有嵌入式图像（作为附件）的HTML电子邮件，并且图像在GMail中按预期显示。但是，它们也显示为电子邮件下的附件。有谁知道如何避免这种情况，即我只希望它们在电子邮件中而不被列为附件。我用过“ Content-Disposition：内联”。我正在使用Spring和JavaMail。 这就是我的邮件最终的样子。谁能看到什么错？ 问题答案： 通过执行以下步骤，可以从GMail中
-
问题内容： 我目前有一个程序，可以从列表中随机选择引号并通过电子邮件发送。我现在也尝试在电子邮件中嵌入图片。我遇到了一个问题，可以附加电子邮件，但报价不再起作用。我已经在网上进行了研究，但解决方案对我不起作用。请注意，我使用的是Python 3.2.2。 任何指导将不胜感激。 从上面的代码可以看出，我尝试了不同的方法（引用＃） 问题答案： 您正在费力地在中构造有效的MIME消息，然后放弃它并发送一
-
问题内容： 我正在尝试发送包含嵌入式gif图像的多部分/相关html电子邮件。该电子邮件是使用Oracle PL / SQL生成的。我的尝试失败了，图片显示为红色X（在Outlook 2007和yahoo邮件中） 我已经发送HTML电子邮件已有一段时间了，但是我现在的要求是在电子邮件中使用多个gif图像。我可以将它们存储在我们的一台Web服务器上并仅链接到它们，但是许多用户的电子邮件客户端不会自动
-
问题内容： 我需要在电子邮件中嵌入图像。我该怎么做？ 我既不想使用第三方工具，也不想对特定于语言的答案感兴趣（但是如果您想知道的话，它就是PHP）。 我只对生成的电子邮件正文的格式感兴趣。 问题答案： 如您所知，作为电子邮件传递的所有内容都必须文本化。 您必须创建包含多部分/ mime消息的电子邮件。 如果要添加物理图像，则该图像必须使用base 64编码并分配了Content-ID（cid）。如
-
问题内容： 我的目标是使用Python向具有嵌入式图像的Gmail用户发送电子邮件。由于图片（我的工作中的数据）的敏感性，无法在线托管该图片，然后通过链接到该图片。 我尝试过将版本编码为，然后发送th is ，但是众所周知这是行不通的。然后，我注意到在Gmail中，您可以将图像拖放到发送框中，它将在接收端内联显示。鉴于此，我然后尝试从Python发送带有图像作为附件的电子邮件。在下面的代码中可以看
-
我正在尝试在电子邮件中嵌入一个图像。我遵循了这里，这里和这里的例子和其他但我不能得到图像显示。 当我执行这个时，我得到的是一个空空如也的身体，里面有一个红十字，没有任何图像。如何使图像与电子邮件正文内联显示？ 我正在使用Outlook 2016。我知道我可以在使用Outlook时插入图片，我也收到过别人在文本中插入图片的“正常”电子邮件，所以这肯定意味着我必须能够查看python脚本生成的图片？