2010-11-30 321 views
72

我需要在電子郵件中嵌入圖像。我該怎麼做?如何在電子郵件中嵌入圖像

我不想使用第三方工具,也不是我對語言特定的答案感興趣(但它是PHP,萬一你想知道)。

我只對結果電子郵件正文的格式感興趣。

回答

102

正如您所知,所有作爲電子郵件消息傳遞都必須進行文本化。

  • 您必須使用multipart/mime消息創建電子郵件。
  • 如果要添加物理圖像,則該圖像必須以base 64編碼並指定Content-ID(cid)。如果它是一個URL,那麼<img />標記就足夠了(圖像的url必須鏈接到源ID)。

的典型電子郵件例子是這樣的:

From: foo1atbar.net 
To: foo2atbar.net 
Subject: A simple example 
Mime-Version: 1.0 
Content-Type: multipart/related; boundary="boundary-example"; type="text/html" 

--boundary-example 
Content-Type: text/html; charset="US-ASCII" 

... text of the HTML document, which might contain a URI 
referencing a resource in another body part, for example 
through a statement such as: 
<IMG SRC="cid:foo4atfoo1atbar.net" ALT="IETF logo"> 

--boundary-example 
Content-Location: CID:somethingatelse ; this header is disregarded 
Content-ID: <foo4atfoo1atbar.net> 
Content-Type: IMAGE/GIF 
Content-Transfer-Encoding: BASE64 

R0lGODlhGAGgAPEAAP/////ZRaCgoAAAACH+PUNv 
cHlyaWdodCAoQykgMTk5LiBVbmF1dGhvcml6ZWQgZHV 
wbGljYXRpb24gcHJvaGliaXRlZC4A etc... 

--boundary-example-- 

正如你所看到的,Content-ID: <foo4atfoo1atbar.net> ID在SRC="cid:foo4atfoo1atbar.net"匹配到<IMG>。這樣,客戶端瀏覽器會將您的圖像作爲內容呈現,而不是作爲附件。

希望這會有所幫助。

+2

信息來源(因爲我老了)http://www.htmlcodetutorial.com/help/archive.php/o_t__t_5309__how-to-embed-image-in-html.html – 2010-11-30 10:50:12

+0

好吧,我做到了。然而,Gmail中存在問題,因爲它仍然在附件中顯示圖片,並詢問我是否要顯示圖片。 – 2010-11-30 12:18:03

+2

@JosefSábl,這是谷歌阻止附件的政策(因爲病毒可以通過圖像傳播)。它與你的應用程序無關。微軟,雅虎等也是這樣做的。 – 2010-11-30 12:20:54

2

一般來說,我通過設置一個HTML格式的SMTP消息來處理這個問題,IMG標記指向一個內容服務器。只要確保你有文本和HTML版本,因爲一些電子郵件客戶端不能支持HTML電子郵件。

+2

是啊,但這種方法的缺點山楂,最重要的客戶端將不會立即加載圖片,並要求用戶加載它們來代替。 – 2010-11-30 12:19:52

16

的第三種方式是Base64編碼圖像,並將其放置在一個data: URL

例如:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACR0lEQVRYha1XvU4bQRD+bF/JjzEnpUDwCPROywPgB4h0PUWkFEkLposUIYyEU4N5AEpewnkDCiQcjBQpWLiLjk3DrnZnZ3buTv4ae25mZ+Z2Zr7daxljDGpg++Mv978Y5Nhc6+Di5tk9u7/bR3cjY9eOJnMUh3mg5y0roBjk+PF1F+1WCwCCJKTgpz9/ozjMg+ftVQQ/PtrB508f1OAcau8ADW5xfLRTOzgAZMPxTNy+YpDj6vaPGtxPgvpL7QwAtKXts8GqBveT8P1p5YF5x8nlo+n1p6bXn5ov3x9M+fZmjDGRXBXWH5X/Lv4FdqCLaLAmwX1/VKYJtIwJeYDO+dm3PSePJnO8vJbJhqN62hOUJ8QpoD1Au5kmIentr9TobAK04RyJEOazzjV9KokogVRwjvm6652kniYRJUBrTkft5bUEAGyuddzz7noHALBYls5O09skaE+4HdAYruobUz1FVI6qcy7xRFW95A915pzjiTp6zj7za6fB1lay1/Ssfa8/jRiLw/n1k9tizl7TS/aZ3xDakdqUByR/gDcF0qJV8QAXHACy+7v9wGA4ngWLVskDo8kcg4Ot8FpGa8PV0I7MyeWjq53f7Zrer3nyOLYJpJJowgN+g9IExNNQ4vLFskwyJtVrd8JoB7g3b4rz66dIpv7UHqg611xw/0om8QT7XXBx84zheCbKGui2U9n3p/YAlSVyqRqc+kt+mCyWJTSeoMGjOQciOQDXA6kjVTsL6JhpYHtA+wihPaGOWgLqnVACPQua4j8NK7bPLP4+qQAAAABJRU5ErkJggg==" width="32" height="32"> 
7

中嵌入圖像到Outlook和避免安全問題的正確的方法是下一:

  1. 對Outlook 2003使用互操作;
  2. 創建新郵件並設置保存文件夾;
  3. 不要使用base64嵌入,outlook 2007不支持它;不要在磁盤上引用文件,它們不會被髮送;不要使用字編輯器檢查器,因爲您將在某些機器上收到安全警告;
  4. 附件必須有png/jpg擴展名。如果它將有例如tmp擴展 - Outlook將警告用戶;
  5. 注意如何在沒有mapi的情況下生成CID;
  6. 請勿通過獲取器訪問屬性,否則會在某些機器上收到安全警告。

    public static void PrepareEmail() 
    { 
        var attachFile = Path.Combine(
         Application.StartupPath, "mySuperImage.png"); // pay attention that image must not contain spaces, because Outlook cannot inline such images 
    
        Microsoft.Office.Interop.Outlook.Application outlook = null; 
        NameSpace space = null; 
        MAPIFolder folder = null; 
        MailItem mail = null; 
        Attachment attachment = null; 
        try 
        { 
         outlook = new Microsoft.Office.Interop.Outlook.Application(); 
         space = outlook.GetNamespace("MAPI"); 
         space.Logon(null, null, true, true); 
    
         folder = space.GetDefaultFolder(OlDefaultFolders.olFolderSentMail); 
         mail = (MailItem) outlook.CreateItem(OlItemType.olMailItem); 
    
         mail.SaveSentMessageFolder = folder; 
         mail.Subject = "Hi Everyone"; 
         mail.Attachments.Add(attachFile, OlAttachmentType.olByValue, 0, Type.Missing); 
         // Last Type.Missing - is for not to show attachment in attachments list. 
    
         string attachmentId = Path.GetFileName(attachFile); 
         mail.BodyFormat = OlBodyFormat.olFormatHTML; 
    
         mail.HTMLBody = string.Format("<br/><img src=\'cid:{0}\' />", attachmentId); 
    
         mail.Display(false); 
        } 
        finally 
        { 
         ReleaseComObject(outlook, space, folder, mail, attachment); 
        } 
    } 
    
4

實際上,有兩種方法可以包括在電子郵件中的圖像。

第一種方式確保用戶將看到圖像,即使在某些情況下,它只是作爲消息的附件。這種方法正是我們在日常生活中所稱的「在電子郵件中嵌入圖像」。
實質上,您將圖像附加到電子郵件。好的一面是,用這種或那種方式,用戶一定會得到圖像。雖然缺點是兩倍。首先,垃圾郵件過濾器會查找大量的嵌入式圖像,並且通常會爲您在電子郵件中嵌入圖像時提供更高的垃圾郵件分數(許多垃圾郵件發送者使用圖像以避免垃圾郵件過濾器讀取其電子郵件中不適當的內容)。其次,如果您付費以重量或千字節發送您的電子郵件,這會增加郵件的大小。如果您不小心,它甚至可能使您的消息對於電子郵件提供商的參數太大。

第二種包含圖像(以及更常見的方式)的方式與將圖像放在網頁上的方式相同。在電子郵件中,您提供了一個url,它是對服務器上圖像位置的引用,與網頁上的方式完全相同。這有幾個好處。首先,你不會因爲形象而被髮送垃圾郵件或者因爲你的信息「過重」而被捕。其次,如果您發現電子郵件發送錯誤,您可以在發送電子郵件後對圖像進行更改。另一方面,您的收件人需要主動打開其電子郵件客戶端中的圖片查看功能才能看到您的圖片。

7

這裏是如何獲得一個嵌入式圖像的代碼,而不用擔心任何文件或base64語句或啞劇(它仍然是base64,但你不必做任何事情得到它)。我最初發布了這個相同的answer in this thread,但在這一個中重複它也可能是有價值的。

要做到這一點,你需要Mozilla Thunderbird中,你可以像這樣的圖像讀取html代碼:

  1. 複製一個位圖到剪貼板。
  2. 開始新的電子郵件。
  3. 粘貼圖像。 (不要將它保存爲草稿!!!)
  4. 雙擊它以進入圖像設置對話框。
  5. 尋找「圖像位置」屬性。
  6. 獲取代碼,並在圖像標籤包裝它,就像這樣:

您應該結束了的文字是這樣的字符串:

<img src="data:image/png;base64,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" alt="" height="211" width="213"> 

你可以用這件事成字符串變量,並把它放在絕對的任何地方,你會呈現一個HTML電子郵件 - 即使在你的電子郵件簽名。好處是沒有附件,並且沒有鏈接。 (此代碼將顯示一個蜥蜴)

一張圖片勝過千言萬語: enter image description here

相關問題