Gmail会阻止电子邮件模板中的小型嵌入式内嵌图像
use*_*050 23 html email gmail image
我正在向我的会员发送电子邮件,看起来Gmail正在阻止我在电子邮件中放置的图片.它们作为基础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’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>Kul*_*gin 26
Google拒绝在Gmail的网络界面中显示带有数据网址的图片.这是一个众所周知的问题(在谷歌看来是一种安全措施)长期受到高度批评.
好消息是除了使用外部图像外,还有其他选择.
使用带有Content-ID的内联附件可与Gmail配合使用.
将图像添加为内联附件后,您需要在html正文中指向CID网址而不是数据网址.
有许多现代化的库可以让您轻松发送带有内联附件的电子邮件.但是我在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
- @Brethlosze因此，您否决了此答案，因为服务器拒绝了作为发件人发送的地址，并要求您提供未提供的TLS？这个答案不过是概念证明，要求成功发送消息。首先完成发送电子邮件的信息，然后投诉电子邮件中的图像是否不起作用。错误消息是明确的。如果您坚持这些错误，请随时提出一个新问题。 (4认同)
小智 9
经过多次尝试和失败，我找到了 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 库的例子中都会重复出现。
小智 7
你在使用nodemailer吗？
如果是的话，有解决办法！
NPM 有一个名为nodemailer-plugin-inline-base64的软件包，允许您将带有数据 uri 的图像发送到所有电子邮件提供商，例如 gmail、outlook 等。
设置：
yarn add nodemailer nodemailer-plugin-inline-base64
并尝试一下
yarn add nodemailer nodemailer-plugin-inline-base64
祝你今天过得愉快！
- 进一步查看 Nodemailer 文档，看起来这个包没有（或不再？）有用：我们只需要在 sendMail 选项中添加 `attachDataUrls: true` 即可。 (5认同)
tl; dr
Gmail和某些其他客户端不喜欢base64编码图像。
全文
我做的第一件事是在Gmail中查看“显示原始邮件”。令我惊讶的是，原始内容仍然具有您的嵌入式图像数据：
这立刻告诉我gmail只是选择过滤掉此内容。我找不到原因。一些猜测指出了编码数据本身的长度。其他人则谈到了Gmail过滤图像的一般方法。甚至几年前已有这项技术起作用的记录。
另外，当在第三方客户端（例如Newton（以前称为Cloud Magic））中查看相同的电子邮件时，我确实看到了正确渲染的图像。
所有这些都表明gmail不喜欢嵌入式编码的图像这一简单但令人遗憾的事实。不在浏览器中，也不在其移动应用程序中。
实际上，最后，我确实发现Campaign Monitor博客在2013年发表的一篇帖子得出了相同的结论。
不要使用嵌入式图像。
- 对于后人来说，众所周知，[Gmail 不支持 data-uri/data-url/嵌入图像](/sf/answers/600627121/)。这与“base64”编码、数据长度或 Gmail 如何过滤内容无关。据我所知，至少从 2010 年起，嵌入图像就不再在 Gmail 中使用了。您的答案的 TL;DR 仍然是正确的（不要使用内联图像），只是不希望未来的读者认为有办法让它与 Gmail 一起使用 - 据我所知，没有。 (2认同)
| 归档时间： |
|
| 查看次数： |
21070 次 |
| 最近记录： |