我正在尝试用nodemailer通过gmail发送电子邮件，但问题是我所在的公司从outlook和windows 10邮件中打开它们，问题是我必须嵌入徽标和背景等图像。它可以很好地附加图像，但我不希望它们在打开电子邮件时看起来像要下载的图像。
尝试各种选项，如将图像转换为base64或使用图像作为链接，但后者仅适用于以下操作:
<img data-imagetype="External" src="https://imgur.com/nTjrntx.png"/>
你可以看到，当我把data-imagetype =" External "它工作，问题是，我想放一个背景图像，为此，我使用属性background: url ()
是否有办法将data-imagetype放入background: url ()中?
因为如果我把这个html代码不工作:
<main style="position: relative;display:flex;flex-direction:column;">
<section style="z-index: 1;">
<img data-imagetype="External" src="https://imgur.com/JzrkOXb.png" />
</section>
<section style="position: absolute; z-index: 2;left:20%;right:20%;margin-top:10%">
Hello People
</section>
</main>
我知道它不工作，由于CSS样式的不兼容，邮件客户端可以处理
这是我的代码:
<!DOCTYPE html>
<html >
<body>
<main style="padding-left:40px;padding-right:40px;border:0.5px solid #e5e5e5;margin-top:20px;border-radius:2px;background-image:url('https://imgur.com/JzrkOXb.png');background-repeat: no-repeat;background-position:center;background-size: 100% 100%;background-color:#2AEDC2;">
<p style="font-size:20px;text-align:center;color:black"><strong>Hello People</strong></p><br />
<p style="text-align:center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut quam leo. Donec ut felis in arcu fermentum pulvinar.</p><br />
<p style="text-align:center;">!REGARDS!</p><br /><br /><br />
</main>
</body>
</html>
实现不可能的，我可以把背景图像和文本放在顶部，像这样:
<td valign="top" style="background-image:url(https://imgur.com/JzrkOXb.png);background-repeat: no-repeat;background-position:center;background-size: 100% 100%;>
<!--[if gte mso 9]>
<v:image data-imagetype="External" xmlns:v="urn:schemas-microsoft-com:vml"
fill="true" stroke="false" style=" border: 0;display: inline-block;
width:850px;height:350px;" src="https://imgur.com/JzrkOXb.png" />
<v:rect data-imagetype="External" xmlns:v="urn:schemas-microsoft-com:vml"
fill="true" stroke="false" style=" border: 0;display: inline-
block;position: absolute; width:700px;height:250px;margin-
left:80px;margin-top:50px;">
<v:fill opacity="0%" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div style="color:#808080">
<p style="font-size:20px;text-align:center;"><strong>Dear people.
</strong></p><br />
<p style="text-align:center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut fringilla elit.</p><br />
<p style="text-align:center;">!REGARDS!</p><br /><br /><br />
<table width="100%" cellpadding="0px" cellspacing="0px"></table><br /><br /><br />
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:fill>
</v:rect>
</v:image>
<![endif]-->
</td>
正如你所看到的，我不得不使用VML语言，关键是在这一行v: image data-imagetype = "External" xmlns: v = "urn: schemas-microsoft-com: vml ...中，当放置图像类型时，在几个邮件客户端(如windows 10邮件、outlook、gmail和yahoo)中工作得很好。
我给你留了一点VML文档:https://learn.microsoft.com/en-us/windows/win32/vml/web-workshop---how-to-use-vml-on-web-pages-----image--element
虽然唯一的细节是，显然在网页和移动设备上，当想要将字母的颜色更改为黑色时，它会变为白色，反之亦然。
我很高兴能做到这一点，我希望它能帮助那些有同样问题的人:)