網頁

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不要直接顯示內嵌圖片的設定,如果你知道,麻煩跟我說一聲。

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。