Display my image from MS Graph to Azure Bot Services

Question

How can I send the user a card with a photo I received from Microsoft Graph, like from the url https://graph.microsoft.com/v1.0/me/photo/$value? I think it returns a blob but the bot framework wants an image url instead. I tried it with CardFactory.heroCard(..., [photo], ...) but it didn't show it.

Answer 1

The documentation describes how to include an inline image binary in a message:

For channels that support inline binaries of an image, you can set the contentUrl property of the Attachment to a base64 binary of the image (for example, data:image/png;base64,iVBORw0KGgo…). The channel will display the image or the image's URL next to the message's text string.

In the BotBuilder V4 Node SDK, you can convert the image binary to base64 like this:

// After getting an HTTP response:

var imageType = "image/jpeg"
var imageBytes = Buffer.from(response.data).toString('base64');
var imageSrc = `data:${imageType};base64,${imageBytes}`;

var reply = MessageFactory.attachment({
    contentType: imageType,
    contentUrl: imageSrc,
    name: "Your photo"
}, "Here it is:");

await turnContext.sendActivity(reply);

There is one gotcha to keep in mind. If you're using the Axios library (which is a good idea because it lets you await HTTP requests), you will need to set the responseType in the config to arrayBuffer or else the image binary may be formatted incorrectly and the image won't render:

var response = await axios.get("https://graph.microsoft.com/v1.0/me/photo/$value", {
    responseType: 'arraybuffer'
});