Outlook 2016 does not render logo (image) in Event Email invitation

Question

We have an O365 add-in that works on Calendar. It puts HTML to the body of the invite. All works well except the Image we put. How to make the image appear in the Invitation email view?

var logo = "<div style=\"line-height:60px\"><img src=\"https://static-a.test.com/a2/custom-assets/enterprise/4714/isg_logo/d05aa76d58614c0e88b864eec963cec0.png\" height=\"30\" alt=\"Test Meet\" style=\"user-select: none;\" tabindex=\"0\"></div>";

var formattedBody = agenda
            + _.repeat(newLine, 1)
            + logo
            + testInvitation;

return Q.oinvoke(Office.context.mailbox.item.body, "setAsync", formattedUserBody, { coercionType: coercionType })
           .then(function() {
                    logger.info("Add meeting completed successfully");
                });

Is there another way to fix it or is it a known limitation of Outlook?

Logo renders properly in Calendar view, not on Email view
Some VSTO add-in can render the logo, but not Office 365 addin
Logo is seen in OWA and Mobile apps, but not in Outlook 2016 Mac and windows

We fixed the issue by following this link in Outlook 2013.

----- 01/09/19 - Update on Issues following the Solution provided ----------

The primary issue reported got fixed by the solution. Now, we can see Logo in email invitation, but it is broken in Calendar view.

The changed code:

var formattedBody = agenda
        + _.repeat(newLine, 1)
        +  "<img src='cid:testMeet.png'/>"
        + testInvitation;


Office.context.mailbox.item.addFileAttachmentAsync(
  "https://static-a.test.com/a2/custom-assets/enterprise/4714/isg_logo/d05aa76d58614c0e88b864eec963cec0.png",
  "testMeet.png",
  {asyncContext: null, isInline: true},
  function (asyncResult)  {
        Office.context.mailbox.item.body.setAsync( 
    formattedBody,
          { coercionType: Office.CoercionType.Html, asyncContext:null }); 
   });

This fix also breaks the logo rendering in Outlook Mobile App. Please advise as we need to have the logo between Agenda (if any) and our Text.

---- Screenshot 01/16/2019 -----

------ Outlook Matrix 01/26/2019 -------

Outlook Add-ins Team - MSFT Outlook Add-ins Team - MSFT · Accepted Answer · 2019-01-09T18:19:27

Adding an image to the body this way is incorrect, and as you have seen, sometime buggy. Instead you should use addFileAttachmentAsync, more specifically the isInline property, which will allow you to use a cid: reference to add your image.

An example of this would be:

Office.context.mailbox.item.addFileAttachmentAsync(
  "https://static-a.test.com/a2/custom-assets/enterprise/4714/isg_logo/d05aa76d58614c0e88b864eec963cec0.png",
  "testMeet.png", 
  {asyncContext: null, isInline: true},  
  function (asyncResult)  {
        Office.context.mailbox.item.body.setAsync( 
          "<img src='cid:testMeet.png'/>", 
          { coercionType: Office.CoercionType.Html, asyncContext: null });
});

Outlook 2016 does not render logo (image) in Event Email invitation

1 Answers