如何在 Outlook 2016 的电子邮件中插入 HTML(包括图像)

新手上路,请多包涵

尽管 Outlook 默认以 HTML 格式发送电子邮件,但 Microsoft 似乎想让我们自己编写该 HTML 变得困难。使用 HTML 的一个重要原因是在插入图像时通过使用 <img> 标签从在线访问图像而不是将图像本身插入到电子邮件正文中来减小电子邮件的大小-邮件。

多个消息来源 [例如 12 ] 说,执行此操作的方法是使用“作为文本插入”来插入包含 HTML 代码的文件。但从 Office 2016 开始,“作为文本插入”选项默认不再可用。不过幸运的是,也有资源 [例如 3 ] 展示了如何取回它。

但是,当我尝试这样做时,Outlook 没有解释我的 HTML。因此,例如,如果我创建一个包含以下行的文件:

 <img src="https://www.lenetek.com/blog/how-to-create-html-emails-in-outlook/images/attach_file.jpg" alt="Random online image">

然后使用“Insert as Text”将该行插入到我的电子邮件中,结果只是那行代码,而不是图像。我究竟做错了什么?

(如 alt 属性所示,该示例中的图像文件只是出现在上面引用的一篇文章中的随机在线图像。我与该网站没有任何隶属关系。)

原文由 NewSites 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 3.9k
2 个回答

答案很简单。从某种意义上说,这是显而易见的,但从另一方面来说,事实并非如此。

答案是插入的每一段 HTML 代码都必须是一个完整的 HTML 文件,包括 <!DOCTYPE><HTML><body> 标签,而不仅仅是所需的 HTML代码。之所以不明显,是因为如果你插入多个代码段,每个代码段都必须是一个完整的 HTML 文件,这是你在实际编写 HTML 时永远不会做的事情。我假设发生的事情是,当 Outlook 检测到一个有效的 HTML 文件被“作为文本插入”时,它会去除开头和结尾 <!DOCTYPE><HTML><body> 标记然后插入它们之间的代码——作为 HTML,而不是文本。

因此,我找到的解决方案是,我需要将包含以下内容的文件“插入为文本”,而不是问题中显示的单行代码:

 <!DOCTYPE html>
<html>
<body>
<img src="https://www.lenetek.com/blog/how-to-create-html-emails-in-outlook/images/attach_file.jpg" alt="Random online image">
</body>
</html>

当我将它作为文本插入我的电子邮件时,我看到的是图像,而不是代码。

在我在网上找到的所有说使用“作为文本插入”在 Outlook 中插入 HTML 的资源中,没有一个说它必须是一个完整的 HTML 文件,而不仅仅是所需的代码。所以也许这个问答会对其他人有所帮助,如果我不是唯一一个在想到这个问题之前不得不挠头很长时间的人的话。

========================

在电子邮件中添加了有关使用 HTML 的详细信息:

正如问题中链接的 Lenetek 文章 所指出的,Outlook 不支持所有 HTML 标记。特别是,对于嵌入图像,我发现:

从 Outlook 发送时: Outlook 不支持 <figure><FigCaption> 。我发现放置在这些标签中的图像和标题是内联呈现的,只是忽略了标签。对于浮动到右边距,我发现我能够通过将 <figure> 替换为 <table> 然后将图像及其标题分别放置在 <TR><TD>...</TD></TR> 87ddd2a6b4986fed6a2866d049 中来获得相同的结果 ---

在 Outlook 中接收时:不同的电子邮件客户端对 HTML 的解释方式存在差异,这可能就是为什么某些电子邮件在顶部带有用于在浏览器中查看电子邮件的链接的原因。特别是,我读到 Outlook 在这方面表现不佳。上面提到的我的右浮动图像就是这种情况。

执行“Insert as Text”技巧后,图片在 Outlook 的草稿电子邮件中正确显示在右边缘,但发送时,CSS 样式 float 属性被忽略,表格出现单独位于左边距,周围没有文字。我能够解决这个问题,在 <table> 标签中,将样式属性 float: right; 替换为老式的 HTML 属性 align="right" 这样,当在 Outlook 中收到图像和标题时,图像和标题会正确显示在右边距。我没有测试它在其他电子邮件客户端中的样子。

原文由 NewSites 发布,翻译遵循 CC BY-SA 4.0 许可协议

在使用 HTML 代码生成 Outlook 电子邮件时,我在显示链接图像时遇到了问题。它以某种方式在几台机器上工作,但大多数都没有显示图像。

继续研究知道问题出在 Outlook 解释 HTML 代码上。然后我到达了这个线程,@NewSites 的回答真的很准确。刚刚在我的 HTML 代码顶部添加了 <!DOCTYPE HTML> 行,现在一切正常。

原文由 JABIR 发布,翻译遵循 CC BY-SA 4.0 许可协议

推荐问题