在 html 電子郵件中嵌入圖像

問題描述

我正在嘗試發送帶有嵌入式 gif 圖像的多部分/相關 html 電子郵件。此電子郵件是使用 Oracle PL /SQL 生成的。我的嘗試失敗了，圖像顯示為紅色 X(在 Outlook 2007 和 yahoo 郵件)

我一直在發送 html 電子郵件一段時間，但我的要求是在電子郵件中使用幾個 gif 圖像。我可以將它們存儲在我們的一個 Web 服務器上，只需鏈接到它們，但是許多用户發送電子郵件的客户端將不會自動顯示，並且需要更改設置或為每封電子郵件手動下載。

所以，我的想法是嵌入圖像。我的問題是：

我在這裏做錯了什麼？
嵌入法是正確的嗎？
任何其他選項，如果我需要使用越來越多的圖像？附件將無法正常工作，因為圖像通常不會在消息的上下文中有意義的徽標和圖標。此外，電子郵件的一些元素是鏈接到在線系統，因此生成靜態 PDF 和附加將無法正常工作 (據我所知) 。

片段：

MIME-Version: 1.0
To: me@gmail.com
BCC: me@yahoo.com
From: email@yahoo.com
Subject: Test
Reply-To: email@yahoo.com
Content-Type: multipart/related; boundary="a1b2c3d4e3f2g1"

--a1b2c3d4e3f2g1

content-type: text/html;

    <html>
    <head><title>My title</title></head>
    <body>
    <div style="font-size:11pt;font-family:Calibri;">
    <p><IMG SRC="cid:my_logo" alt="Logo"></p>

... more html here ...

</div></body></html>

--a1b2c3d4e3f2g1

Content-Type: image/gif;
Content-ID:<my_logo>
Content-Transfer-Encoding: base64
Content-Disposition: inline

[base64 image data here]

--a1b2c3d4e3f2g1--

非常感謝。

BTW：是的，我已經驗證了 base64 數據是正確的，因為我可以將圖像嵌入到 html 本身 (使用相同的算法用於創建標題數據)，並在 Firefox /IE 中查看圖像。

我還應該注意到，這不是垃圾郵件，電子郵件將發送給每天期望的特定客户端。內容是 data-driven，而不是廣告。

最佳解決方案

嘗試直接插入，這樣您可以在電子郵件中的各個位置插入多個圖像。

<img src="data:image/jpg;base64,/*base64-data-string%20here*/" />

並且讓這個帖子對別人有用：如果你沒有 base64 數據字符串，可以從圖像文件輕鬆地創建一個：http://www.motobit.com/util/base64-decoder-encoder.asp 。

電子郵件源代碼看起來像這樣，但我真的不能告訴你這個邊界是什麼：

 To: email@email.de
 Subject: ...
 Content-Type: multipart/related;
 boundary="------------090303020209010600070908"

This is a multi-part message in MIME format.
--------------090303020209010600070908
Content-Type: text/html; charset=ISO-8859-15
Content-Transfer-Encoding: 7bit

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-15">
  </head>
  <body bgcolor="#ffffff" text="#000000">
    <img src="cid:part1.06090408.01060107" alt="">
  </body>
</html>

--------------090303020209010600070908
Content-Type: image/png;
 name="moz-screenshot.png"
Content-Transfer-Encoding: base64
Content-ID: <part1.06090408.01060107>
Content-Disposition: inline;
 filename="moz-screenshot.png"

[base64 image data here]

--------------090303020209010600070908--

//編輯：哦，我只是意識到，如果你插入第一個代碼片段從我的帖子寫一個電子郵件與雷鳥，雷鳥自動更改 html 代碼看起來幾乎與我的帖子中的第二個代碼相同。

次佳解決方案

我沒有發現任何這裏的答案有用，所以我提供我的解決方案:)

1) 問題是你使用的是 content-type：multipart /related，在這種情況下不好。我正在使用 multipart /mixed 和裏面的 multipart /alternative(它適用於大多數客户端)

2) 消息結構應如下：

[Headers]
Content-type:multipart/mixed; boundary="boundary1"
--boundary1
Content-type:multipart/alternative; boundary="boundary2"
--boundary2
Content-Type: text/html; charset=ISO-8859-15
Content-Transfer-Encoding: 7bit
[HTML code with a href=""]

--boundary2
Content-Type: image/png;
 name="moz-screenshot.png"
Content-Transfer-Encoding: base64
Content-ID: <part1.06090408.01060107>
Content-Disposition: inline;
 filename="moz-screenshot.png"
[base64 image data here]

--boundary2--
--boundary1--

然後它會工作

第三種解決方案

如果不起作用，您可以嘗試將圖像轉換為 HTML 表格的其中一種工具 (請注意圖像的大小)：

第四種方案

使用 Base64 在 html 中嵌入圖像是非常棒的。儘管如此，請注意，base64 字符串可以使您的電子郵件大小很大。

因此，

1) 如果您有許多圖像，將圖像上傳到服務器並從服務器加載這些圖像可以使您的電子郵件的大小更小。 (您可以通過 Google 獲得大量免費服務)

2) 如果你的郵件中只有幾個圖像，使用 base64 字符串絕對是一個很棒的選擇。

除了現有答案提供的選擇之外，還可以使用命令在 linux 上生成 base64 字符串：

base64 test.jpg

第五種方案

另一個解決方案是附加圖像作為附件，然後使用 cid 引用它的 html 代碼。

HTML 代碼：

<html>
    <head>
    </head>
    <body>
        <img width=100 height=100 id=""1"" src=""cid:Logo.jpg"">
    </body>
</html>

C#代碼：

EmailMessage email = new EmailMessage(service);
email.Subject = "Email with Image";
email.Body = new MessageBody(BodyType.HTML, html);
email.ToRecipients.Add("abc@xyz.com");
string file = @"C:UsersacvPicturesLogo.jpg";
email.Attachments.AddFileAttachment("Logo.jpg", file);
email.Attachments[0].IsInline = true;
email.Attachments(0).ContentId = "Logo.jpg";
email.SendAndSaveCopy();

參考文獻

embedding image in html email

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。