Office-js Add img to html body displayReplyAllForm

332 Views Asked by At

I'm new to Office Web Add-ins and I'm trying to make an app where I Reply to All with an image.

The problem is that I can't attach an image in the html body.

I try this:

Office.initialize = function (reason) {};

function test(event) {
    var item = Office.context.mailbox.item;

    item.displayReplyAllForm("<img src='data:image/png;base64,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'/>");
    event.completed();
}

This works with Outlook Web App, but not in Outlook for the desktop.

So I need another solution for display in both scenarios.

2

There are 2 best solutions below

0
On BEST ANSWER

I found the solution, in the office.js docs it says the method displayReplyAllForm you can attach an image for use in body message.

It solve like this:

Office.context.mailbox.item.displayReplyAllForm(
{
  'htmlBody' : '<img src="cid:squirrel.png"/>',
  'attachments' :
  [
    {
      'type' : Office.MailboxEnums.AttachmentType.File,
      'name' : 'squirrel.png',
      'url' : 'http://i.imgur.com/sRgTlGR.jpg',
      'isInline':true
    }
  ]
});

you need to specify 'isInline':true if not it will be attached to email as a simple file and not for body use.

3
On

HTML messages are rendered by Word, not Internet Explorer in the desktop version of Outlook, and Word does not support images embedded into HTML. The only option is to add the image as an attachment and refer to it through its content id in the HTML body (<img src="cid:xyz"> where xyz is the Content-ID MIME header of the image attachment). Or you can have an external image.