在html電子郵件中嵌入圖像

我試圖發送一個嵌入式gif圖像的multipart/related html email。這封電子郵件是使用Oracle PL/SQL生成的。我的嘗試失敗了，圖像顯示爲紅色X（在Outlook 2007和yahoo郵件中）在html電子郵件中嵌入圖像

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

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

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

片段：

MIME-Version: 1.0 
To: [email protected] 
BCC: [email protected] 
From: [email protected] 
Subject: Test 
Reply-To: [email protected] 
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--

非常感謝。

順便說一句：是的，我已經驗證base64數據是正確的，因爲我可以在html本身中嵌入圖像（使用相同的算法來創建標題數據）並在Firefox/IE中查看圖像。

我還應該注意到，這不是垃圾郵件，電子郵件發送給每天都在期待的特定客戶。內容是數據驅動的，而不是廣告。

來源

2011-07-15 tbone

快速的問題：你的託管這些圖像異地或直接將它們嵌入到電子郵件？ – JonLim

真的是我的問題的一部分，我也可以做。我試圖嵌入它們，但沒有成功。如果我只是鏈接到他們，許多用戶不會首先下載圖片，這是我想避免的。 – tbone

一個正常的''爲我工作，但它是一個圖像，我主持異地。這對你不起作用？ – JonLim

101

試着直接插入它，這樣你可以在電子郵件的不同位置插入多個圖像。

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

而爲了讓這個帖子用地爲他人：如果沒有一個基於64位的數據串，在輕鬆地創建一個： http://www.motobit.com/util/base64-decoder-encoder.asp從圖像文件。

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

To: [email protected] 
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--

//編輯：哦，我只是如果從插入第一代碼片段實現我的發帖使用thunderbird寫電子郵件，thunderbird會自動將html代碼更改爲與我的帖子中的第二個代碼非常相似。

來源

2011-07-15 17:51:08 Bernd

先試了一下，它不適合我的電子郵件。在IE/Firefox中查看效果不錯，但不能作爲電子郵件發送。 – tbone

也許你知道一種方式（內容類型是什麼？text/html？這是我需要知道的以這種方式發送混合html /圖像文件的電子郵件標題） – tbone

代碼適用於通過以下方式發送和接收電子郵件雷鳥。當然，只是測試過它。 – Bernd

如果它不工作，你可以嘗試這些工具，將圖像轉換爲HTML表一（當心你的圖像的尺寸雖然）：

來源

2013-03-14 03:05:08

img2hmtl是我見過的最奇怪的解決方案/想法+1 – CapK

我在這裏找不到任何有用的答案，所以我提供了我的解決方案。

的問題是，你正在使用multipart/related因爲這是不是在這種情況下，良好的內容類型。我使用multipart/mixed並在其中multipart/alternative（它適用於大多數客戶端）。

的消息結構應如下：

[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="cid:..."] 

--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--

然後它會工作

來源

2014-01-08 15:47:10

在這個問題上掙扎+1我的編碼和上面一樣，但是圖像沒有出現（只是一個框架與ALT文本;文本工作正常）。我的內容ID是所以我的href =「cid：filename.jpg」 - 是否有一些特殊的技巧來值或Content-ID和c的語法ID：？ –

我使用RFC2392進行了檢查，並且CID表達式似乎是有效的。但它仍然不顯示。 –

我寫了一個類似問題的答案，並創建了一個ascii藝術來解釋結構：http://stackoverflow.com/a/40420648/633961 – guettli

可能的是Outlook和Outlook Express都可以生成這些多圖像的電子郵件格式的興趣，如果您使用插入/圖片菜單功能插入圖像文件。

顯然，電子郵件類型必須設置爲HTML（而不是純文本）。

任何其他方法（例如拖放或任何命令行調用）都會導致圖像作爲附件發送。

如果你發送這樣的郵件給自己，你可以看到它是如何格式化的！ :)

FWIW，我正在尋找一個獨立的Windows可執行文件，它從命令行模式內嵌圖像，但似乎沒有。這是一個很多人都走了的路徑...可以說，與Outlook Express，通過傳遞一個適當格式的.eml文件。

來源

2014-11-07 11:02:37 Peter

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

因此，

1）如果你有很多圖片，上傳圖片到服務器，並加載從服務器這些圖像可以讓你的電子郵件的大小更小。（你可以通過谷歌獲得很多免費服務）

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

除了現有的答案提供的選擇，你也可以使用一個命令在Linux上生成一個base64字符串：

base64 test.jpg

來源

2014-11-16 10:28:37 Brian

您需要內嵌圖片3個邊界是完全兼容的。
一切都在multipart/mixed裏面。
然後使用multipart/related來包含您的multipart/alternative和您的圖像附件標題。
最後，在multipart/mixed的最後邊界內包含您的可下載附件。

來源

2015-02-10 06:31:47

如果包含一個示例，這將有所幫助。 – Makyen

更有用的是對規範的引用。 – jbruni

-17

如果您使用Outlook通過超鏈接發送靜態圖像，一個簡單的方法是使用Word。

打開MS Word中
將映像複製到一張空白頁
添加超鏈接的圖像（按Ctrl + K）
將映像複製到您的電子郵件

來源

2015-05-25 09:54:44

+16

這傷害了我的眼睛 – markthewizard1234

另一種解決方案將圖片附加爲附件，然後使用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("[email protected]"); 
string file = @"C:\Users\acv\Pictures\Logo.jpg"; 
email.Attachments.AddFileAttachment("Logo.jpg", file); 
email.Attachments[0].IsInline = true; 
email.Attachments(0).ContentId = "Logo.jpg"; 
email.SendAndSaveCopy();

來源

2017-02-02 04:18:13

實際上，有一個非常好的博客文章，列出親的和三種不同的方法缺點由馬丁·戴維斯這個問題。你可以在https://sendgrid.com/blog/embedding-images-emails-facts/閱讀。

我想添加使用CSS背景圖像的第四種方法。

添加

<div id="myImage"></div>

到您的電子郵件的身體和一個CSS類，如：

#myImage { 
    background-image: url('data:image/png;base64,iVBOR...[some more encoding]...rkggg=='); 
    width: [the-actual-image-width]; 
    height: [the-actual-image-height]; 
}

來源

2017-09-09 19:02:26

在html電子郵件中嵌入圖像

回答

相關問題