在 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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

在 html 電子郵件中嵌入影像