No way to use image in Adaptive Card without direct URL to the image ?

[rjgmail88]

Platform

What platform is your issue or question related to? (Delete other platforms).

Nodejs

host

Are you an author (like sending something to Outlook), or a host that is rendering your own cards?

Version of SDK

Bot builder v3

Issue

I would like to use user's profile image from MS graph in adaptive card. I have determined the API call I need to make is as follows

https://developer.microsoft.com/en-us/graph/docs/api-reference/beta/api/profilephoto_get

In this case I would be getting image as a binary data for a profile photo, that needs to converted into a base-64 string.

But, based on adaptive cards schema document looks like we should use URL property where value should be direct URL to the image

'url string Yes The URL to the image'

How should I approach this ? If there any way to use an IMAGE in Adaptive Card w/o direct URL to the image ??

[dclaux]

Data URIs are already supported by the nodejs Adaptive Card renderer. Have you tried using them?

[rjgmail88]

@dclaux , I haven't tried them. Is there any example usage you can point me to to refer ? That will be helpful.
From MS graph documentation this what they mention

'When you use the /photo/$value endpoint to get the binary data for a profile photo, you'll need to convert the data into a base-64 string in order to add it as an email attachment. An example in JavaScript of how to create an array that you can pass as the value of the Attachments parameter of an Outlook Message.'

[dclaux]

Have you followed the link l posted above? There are samples there. Here is a data URI from that page used in an Adaptive Card, try it in the designer:

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "Image",
            "style": "Person",
            "url": "data:image/png;base64,iVBORw0KGgoAAA ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU 5ErkJggg==",
            "size": "Small"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}

[rjgmail88]

@dclaux, Yes, I was reading wiki page link you shared but, was stuck at obtaining data part on the URI

data:[][;base64],

I am guessing it's a base-64 string of image bytes.

Thanks for your help.