如何在 Outlook 2016+ 的電子郵件中插入 HTML（包括圖像）
[英]How to insert HTML (including images) in an e-mail in Outlook 2016+
問題描述
雖然 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 屬性所示，該示例中的圖像文件只是出現在上面引用的一篇文章中的隨機在線圖像。我與該網站沒有從屬關系。）
5 個解決方案
解決方案1
3 已采納 2020-05-09 01:57:00
答案很簡單。 在某種程度上，這是顯而易見的，但在另一方面，它不是。
答案是插入的 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>內來獲得相同的結果<TR><TD>...</TD></TR> 。
在 Outlook 中接收時：不同的電子郵件客戶端對 HTML 的解釋方式存在差異，這可能就是為什么有些電子郵件頂部帶有一個用於在瀏覽器中查看電子郵件的鏈接的原因。 特別是，我讀到 Outlook 在這方面表現不佳。 上面提到的我的右浮動圖像就是這種情況。
執行“插入為文本”技巧后，圖像在 Outlook 的草稿電子郵件中正確出現在右邊距，但發送時，CSS 樣式的float屬性被忽略，表格自行出現在左邊距周圍沒有文字。 我能夠通過在<table>標記中替換樣式屬性float: right;來解決此問題。 使用老式的 HTML 屬性align="right" 。 這樣，當在 Outlook 中接收時，圖像和標題正確顯示在右邊距。 我還沒有測試過它在其他電子郵件客戶端中的樣子。
解決方案2
1 2021-04-06 19:14:22
除了 NewSites 的回答，我想指出，在當前的 Outlook 365 版本中，標准設置中沒有出現“插入為文本”選項。 “附加”選項卡下提到的 function 在模態 window 中不提供“插入為文本”選項。
為此，您必須自己向功能區添加一個新選項卡，並將“附加”按鈕添加到此新選項卡。 單擊這個新添加的按鈕后，您將獲得一個模式，其中包含“插入”按鈕旁邊的小下拉菜單。
解決方案3
1 2021-04-10 00:41:39
我遇到了同樣的問題並且非常沮喪。 這實際上非常容易。 訣竅是使用 outlook.live.com。 在正文中鍵入任何單詞，突出顯示，右鍵單擊，select“檢查”。 代碼將出現，您在 email 正文中鍵入的單詞應突出顯示。 右鍵單擊代碼和 select “編輯為 html”。 然后，在代碼中，突出顯示您在正文中鍵入的單詞並將其替換為您的代碼。 瞧：（我在這里了解到： https://youtu.be/yZOYRhB6ONs ）
解決方案4
0 2022-03-11 17:26:53
在使用 HTML 代碼生成 outlook email 時顯示鏈接圖像時遇到問題。 不知何故，它可以在幾台機器上運行，但大多數都沒有顯示圖像。
繼續研究知道問題在於 Outlook 解釋 HTML 代碼。 然后我到達了這個線程，@NewSites 的回答真的很到位。 剛剛在我的 HTML 代碼的頂部添加了<!DOCTYPE HTML>行，現在一切正常。
解決方案5
0 2022-08-24 13:15:44
Outlook 365（2022 更新）
對於 Outlook 365，需要手動啟用Attach選項。 從消息內部修改命令功能區，而不是主 Outlook window：
注意這個選項是不帶子命令的附加文件，即“經典”附加文件。
從那里您可以選擇作為文本插入，因為 HTML 片段將顯示為已處理，而不僅僅是代碼。
Microsoft® Outlook® for Microsoft 365 MSO (Version 2202 Build 16.0.14931.20652) 64-bit Microsoft® Outlook® for Microsoft 365 MSO（版本 2202 Build 16.0.14931.20652）64 位
超鏈接PNG圖像以打開/下載到Outlook電子郵件正文中
[英]HyperLinking PNG images to open/download into an Outlook e-mail body
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.