Base64 external email Images are displaying with Orange outline in outlook desktop app-CodePudding

I want to send email to users by embedding base64 images. The images are rendered properly in outlook when opened from browser and outlook desktop app opened in safe mode. But the same image when viewed in desktop application(without safe mode), have a orange outline, added image here. I have tried adding some css to the <img>, <table>,<tr>, <td> tags, with specifying the background color, border(none,0) used important, but nothing seemed to be working. Any suggestions would be appreciated. Thanks. HTML template code:

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Outlook 2007 Test</title>
      <style media="all" type="text/css"> img:not([src]) {visibility: hidden;} 
         .image-container{ color: #000 !important; text-shadow: none !important; background: transparent !important; box-shadow: none !important; z-index: 100000;width:200px;height:200px; border:0px !important; overflow:hidden; display:block;}
         .image-container img{ margin:-1px; padding:0px; display: block; line-height: 0px; font-size: 0px; border:0px !important;}
      </style>
   </head>
   <body>
         <table style="border-collapse: collapse;">
            <tbody>
               <tr style="border-collapse: collapse;&gt;&lt;td style=" border-collapse:="" collapse;="">
                  <span >
                  <img width="100" height="100" align="top" src="data:image/png;base64...." alt="graphic">
                  </span>
               </tr>
            </tbody>
         </table>
   </body>
</html>

CodePudding user response：

A few things.

Outlook blocks base64 encoded images. But, indeed, if you use Outlook /safe, you can workaround this.

Apple email client allows base64 encoded images.

Another approach would be to embed an image by attaching a file.

On this page, you can find a comprehensive guide with all the scenarios:

https://mailtrap.io/blog/embedding-images-in-html-email-have-the-rules-changed/

Hope it helps!

CodePudding user response：

The desktop edition of Outlook doesn't understand or render base64 images. If you need to get images delivered correctly you need to upload them to any web server and use a link to web server with such image. But that is not ideal too, Outlook also may block external images by default. The best solution is to embed images by attaching them to the mail item and then referring to them from the message body by using the CID attribute.

In Outlook you need to set the PR_ATTACH_CONTENT_ID MAPI property (the DASL name is "http://schemas.microsoft.com/mapi/proptag/0x3712001F") by using the Attachment.PropertyAccessor.SetProperty method. Then you can refer such attachments using the src attribute which matches the value of PR_ATTACH_CONTENT_ID set on the attachment. The PR_ATTACH_CONTENT_ID property corresponds to the Content-ID MIME header when the message is sent.

attachment = MailItem.Attachments.Add("c:\test\Picture.jpg")
attachment.PropertyAccessor.SetProperty("http://schemas.microsoft.com/mapi/proptag/0x3712001F", "YourId")
MailItem.HTMLBody = "<html><body>Your image embedded is <img src=""cid:YourId""></body></html>"