时间戳

首页 > 解决方案 > 如何在 Outlook 2016+ 的电子邮件中插入 HTML（包括图像）

html - 如何在 Outlook 2016+ 的电子邮件中插入 HTML（包括图像）

问题描述

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

几个来源 [例如，1 , 2 ] 说这样做的方法是使用“插入为文本”来插入包含 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 属性所示，该示例中的图像文件只是出现在上面引用的一篇文章中的随机在线图像。我与该网站没有从属关系。）

标签： htmlemailoutlook

解决方案

答案很简单。在某种程度上，这是显而易见的，但在另一方面，它不是。

答案是插入的每一段 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>.

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

在执行“插入为文本”技巧后，图像在 Outlook 中的草稿电子邮件中正确显示在右边距，但在发送时，CSS 样式float属性被忽略，表格在左边距出现没有文字环绕它。我可以通过在<table>标签float: right;中用老式的 HTML 属性替换 style 属性来解决这个问题align="right"。这样，在 Outlook 中接收到的图像和标题正确显示在右边距。我还没有测试过它在其他电子邮件客户端中的样子。

推荐阅读