Outlook add-in - Insert HTML with background image - html

Question

I have an outlook add-in that should insert HTML into an appointment. This can be done by calling:
item.body.setSelectedDataAsync
My problem is that I'm trying to insert HTML with a background image. This works fine when using Outlook in the browser, but the Outlook client requires workarounds using VML as described here:
https://www.emailonacid.com/blog/article/email-development/emailology_vector_markup_language_and_backgrounds
I guess item.body.setSelectedDataAsync strips the comments needed for VML (like <!--[if gte mso 9]> ) from the HTML passed to insert?
How can I accomplish adding HTML with background image from my add-in that works across different Outlook versions (browser and client)?
Below is example of javascript code used to insert HTML:
let htmlToInsert = '<table cellpadding="0" cellspacing="0" border="0" width="' + imageWidth + '" >';
htmlToInsert += '<tr><td style="text-align: center; font-size: x-large">' + this.props.roomMap.mapTitle + '</td></tr>';
htmlToInsert += '<tr><td valign="top" style="min-height:' + imageHeight + 'px;height:' + imageHeight + 'px; background-repeat: no-repeat; background-position: center bottom; width:' + imageWidth +';min-height:' + imageHeight + 'px;height:' + imageHeight + 'px;" background="' + this.props.roomMap.thumbnailUrl + '">';
htmlToInsert += '<!--[if gte mso 9]>';
htmlToInsert += '<v:rect style="width:' + imageWidth + 'px;height:' + imageHeight + 'px;" strokecolor="none">';
htmlToInsert += '<v:fill type="tile" src="'+ this.props.roomMap.thumbnailUrl +'" /></v:fill>';
htmlToInsert += '</v:rect>';
htmlToInsert += '<v:shape id="NameHere" style="position:absolute;width:' + imageWidth + 'px;height:' + imageHeight + 'px;">';
htmlToInsert += '<![endif]-->';
htmlToInsert += '<img src="https://www.meetingroommap.net/images/marker.png"/ style="margin-left:' + markerX + 'px; margin-top:' + markerY + 'px">';
htmlToInsert += '<!--[if gte mso 9]>';
htmlToInsert += '</v:shape>';
htmlToInsert += '<![endif]-->';
htmlToInsert += '</td></tr>';
htmlToInsert += '<tr><td style="text-align: center; font-size: xx-small">Powered by <a target="_blank" href="https://www.meetingroommap.net" >www.MeetingRoomMap.net</a></td></tr>';
htmlToInsert += '</table>';
console.log(htmlToInsert);
item.body.setSelectedDataAsync(
htmlToInsert,
{ coercionType: Office.CoercionType.Html,
asyncContext: { } },
function (asyncResult) {
if (asyncResult.status === Office.AsyncResultStatus.Failed){
console.log("Error calling item.body.setSelectedDataAsync: " + asyncResult.error.message);
}
else {
// Successfully set data in item body.
}
});

Answer 1

Thank you for your feedback. After further investigation, it appears there's no great workaround to achieve your scenario. We continue to learn about the new requirements add-in developers have, which helps us enable great scenarios on our platform. We track Outlook add-in feature requests on our user-voice page. Please add your request there. Features on user-voice are also considered when we go through our planning process.
Link to user voice: https://officespdev.uservoice.com/forums/224641-general/category/131778-outlook-add-ins.
Thanks again for your feedback,
Outlook Add-ins Engineering Team