ASP.NET -- 發送內嵌圖片Email

在前篇「當Data URI碰上Email」誤把內嵌圖片當成Data URI，實在抱歉，還有好網友提醒，不然實在不查，寫了也就忘了。

EMail的圖片處理

我們先了解EMail裡的圖片，當我們收到一封圖文並茂的Email，裡面的圖片怎麼顯示出來，或正確的說來源從那裡來？

一般而言Email圖片來源有三種：

1. 附件
2. 網址
3. 內嵌

附件這常用，就不多解釋，但早期以附件最多。網址，也就是在Email裡的HTML的img標籤中src屬性設定為「網址」，當我們打開Email，它會幫我們載入這些網址所對應的圖片，好處是Email容量不會長的很胖，想想當Email圖用的越多，你又把它全部以附件附在裡面，那可是會變成小胖妹！

最後的「內嵌」，想成我們在打Word，在Word內插入一張圖片，這張圖會被Word實實在在的複製一份到Word裡，所以插入的越多，Word就越胖。但也就是因為圖片都已經含在Word檔案裡，所以你只要帶著這份Word檔案，不管到那裡，只要打得開，你都能看到Word檔案裡的圖片，而且不用把圖片和Word都必須複製一份放在一起才行。

Email的內嵌圖片原理大致上與Word插入圖片相似，這也就是我碰到的那可以直接顯示圖片Email所用的技術。

那好奇，我們ASP.NET可不可以？是的，一點問題也沒有，而且還很簡單，我們直接看Code，我在首頁放一個「Button控制項」及「Label控制項」：

Protected Sub Send_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Send.Click
  Dim m As New MailMessage()
  m.From = New MailAddress("發信者Email")
  m.To.Add(New MailAddress("收件者Email"))

  ' http://msdn.microsoft.com/zh-tw/library/system.net.mail.mailmessage.attachments.aspx
  ' Attachments, 有s，這是集合，也就是可以含很多檔案
  m.Attachments.Add(New Attachment("圖片路徑"))
  ' ContentID：http://msdn.microsoft.com/zh-tw/library/system.net.mail.attachmentbase.contentid.aspx
  ' 重點一：必須設定這個附件MIME內容ID，名稱可以自訂
  m.Attachments(0).ContentId = System.Guid.NewGuid.ToString()
  ' ContentDisposition.Inline：http://msdn.microsoft.com/zh-tw/library/system.net.mail.attachment.contentdisposition.aspx
  ' 重點二：附件的展示資訊，設定為內嵌(Inline = True)
  m.Attachments(0).ContentDisposition.Inline = True

  m.Attachments(0).NameEncoding = Encoding.UTF8
  m.SubjectEncoding = Encoding.UTF8
  m.BodyEncoding = Encoding.UTF8

  m.Subject = "內嵌KKBruce個人照測試"
  m.IsBodyHtml = True
  ' 第三個重點，img的src屬性與a的href屬性必須是"cid:"接我們剛才設定的ContentID
  ' 這樣就能直接讀取Email裡內嵌的圖片
  m.Body = String.Format("<img src=""{0}"" alt=""這是我金剛個人照"" /><br /><a href=""{0}"" target=""_blank"">點擊看照片</a>", "cid:" & m.Attachments(0).ContentId)

  Dim s As New SmtpClient
  s.Port = 25
  s.Host = "ServerIP"
  ' 以下為SMTP認為之帳號及密碼
  s.Credentials = New System.Net.NetworkCredential("帳號", "密碼")

  Try
    s.Send(m)
    state.Text = "傳送成功。"
  Catch ex As Exception
    state.Text = "傳送失敗:" & ex.Message
  End Try
End Sub

重點我都寫在註解裡了，主要是透過ContentId與ContentDisposition.Inline兩個屬性來實作出內嵌圖片的Email，讓我們來看看結果。

這是一封有「附件」的Email，

將滑鼠移至「點擊看照片」，你就能看到提示「cid:GUID」，cid:名稱，只要與ContentId相符即可。

我們來看原始檔內容：

<img src="cid:3f041322-0525-4fb7-b28a-377ba9313239" alt="這是我金剛個人照" /><a href="cid:3f041322-0525-4fb7-b28a-377ba9313239" target="_blank">點擊看照片</a>

Where in KKBruce Photo?

這種內嵌圖片很好玩，雖然Outlook提示是有附件，但你找不到，就算你使用「儲存所附件」，

依然空空。

其實它已經和Email合為一體了，在Outlook 2010，你必須選擇「檔案」「資訊」「內容」 ：

…以上刪除…
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: base64

Content-Type: application/octet-stream; name=kingkong.jpg
Content-Transfer-Encoding: base64
Content-Disposition: inline
Content-ID: <3f041322-0525-4fb7-b28a-377ba9313239>
…以下刪除…

找一下有沒有看到很相似的東西，這就是我們的那張圖，名稱是kingkong.jpg，其他就如同我們的設定。

最後，我還沒有找到讓Outlook 2010不要直接顯示內嵌圖片的設定，如果你知道，麻煩跟我說一聲。