WebView2中无法查看Outlook邮件HTMLBody内的嵌入式图片

问题根源 #

你遇到的核心问题是：Outlook邮件HTML中的cid:image002.png@01XXXXXX.6144X4XX是邮件内嵌资源的标识符，并非本地文件路径或可直接访问的URL。WebView2无法识别cid格式的资源引用，必须先将邮件中的内嵌图片提取到本地，再替换HTML中的cid链接为实际可访问的路径。

解决方案步骤 #

• 提取Outlook邮件中所有内嵌的图片附件（匹配cid标识）
• 将这些图片保存到本地临时文件夹
• 替换HTMLBody中的cid资源链接为本地图片的相对路径（或虚拟主机映射后的URL）
• 加载处理后的HTML到WebView2

具体VB.NET实现代码 #

Imports Microsoft.Office.Interop.Outlook
Imports System.IO
Imports System.Text.RegularExpressions

' 假设selectedMailItem是已选中的Outlook MailItem对象
Async Sub LoadEmailWithImagesIntoWebView2()
    Dim htmlBody As String = selectedMailItem.HTMLBody
    Dim tempFolder As String = Path.Combine(Path.GetTempPath(), Guid.NewGuid().ToString())
    Directory.CreateDirectory(tempFolder)

    ' 1. 提取并保存内嵌图片
    For Each att As Attachment In selectedMailItem.Attachments
        ' 判断是否为内嵌资源（通过PR_ATTACH_CONTENT_ID属性）
        Dim cid As String = att.PropertyAccessor.GetProperty("http://schemas.microsoft.com/mapi/proptag/0x3712001F")
        If Not String.IsNullOrEmpty(cid) Then
            ' 保存图片到临时文件夹
            Dim imagePath As String = Path.Combine(tempFolder, cid)
            att.SaveAsFile(imagePath)
            
            ' 2. 替换HTML中的cid链接为相对路径（或虚拟主机URL）
            Dim cidPattern As String = $"src=['""]cid:{Regex.Escape(cid)}['""]"
            htmlBody = Regex.Replace(htmlBody, cidPattern, $"src=""{cid}""")
        End If
    Next

    ' 3. 保存处理后的HTML到临时文件
    Dim htmlFilePath As String = Path.Combine(tempFolder, "email.html")
    File.WriteAllText(htmlFilePath, htmlBody)

    ' 4. 配置WebView2虚拟主机映射并加载HTML
    Await webView.EnsureCoreWebView2Async(Nothing)
    webView.CoreWebView2.SetVirtualHostNameToFolderMapping(
        "email-host", 
        tempFolder, 
        CoreWebView2HostResourceAccessKind.Allow
    )
    webView.CoreWebView2.Navigate("http://email-host/email.html")
End Sub

关键细节说明 #

• 提取内嵌资源：通过PR_ATTACH_CONTENT_ID（属性标识0x3712001F）获取附件对应的cid值，这是匹配HTML中cid引用的关键。
• 链接替换：使用正则表达式精准替换HTML中所有src=cid:xxx格式的链接为本地图片文件名（因为临时文件夹已映射为虚拟主机，相对路径即可访问）。
• 虚拟主机权限：使用CoreWebView2HostResourceAccessKind.Allow确保WebView2可以访问虚拟主机映射的文件夹资源，避免跨域或权限问题。

替代方案：使用NavigateToString配合Data URI #

如果不想创建临时文件，可以将图片转为Base64编码的Data URI，直接嵌入HTML中：

' 替换上述保存图片和链接替换的步骤为：
For Each att As Attachment In selectedMailItem.Attachments
    Dim cid As String = att.PropertyAccessor.GetProperty("http://schemas.microsoft.com/mapi/proptag/0x3712001F")
    If Not String.IsNullOrEmpty(cid) Then
        ' 将图片转为Base64
        Dim ms As New MemoryStream()
        att.SaveAsFile(ms)
        Dim base64 As String = Convert.ToBase64String(ms.ToArray())
        ' 获取图片MIME类型
        Dim mime As String = att.PropertyAccessor.GetProperty("http://schemas.microsoft.com/mapi/proptag/0x370E001F")
        ' 替换为Data URI
        Dim cidPattern As String = $"src=['""]cid:{Regex.Escape(cid)}['""]"
        htmlBody = Regex.Replace(htmlBody, cidPattern, $"src=""data:{mime};base64,{base64}""")
    End If
Next

' 直接加载处理后的HTML
Await webView.EnsureCoreWebView2Async(Nothing)
webView.CoreWebView2.NavigateToString(htmlBody)

内容的提问来源于stack exchange，提问作者Adeleke Oluwasesan