Adaptive card image partially rendered in MS Teams

user_8404880 0
Viewed 630

I'm generating dynamic images and include them as part of the adaptive card, the images are relatively small only 60kb, when I reply with the image for the first time, it's partially shown until I scroll up or leave the conversation I assume that triggers native update, as soon as image is cached it's loaded properly, the problem appears only with the first render

{
    "type": "AdaptiveCard",
    "version": "1.2",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "body": [
        {
            "type": "TextBlock",
            "text": "Any text",
            "wrap": true
        },
        {
            "type": "Image",
            "url": "https://806168b00b02.ngrok.io/myimage"
        }
    ]
}

enter image description here

Is there a workaround to let the image fully render for the first time?

microsoft-teams adaptive-cards
2 Answers

I also experience this, and it's a bit of a pain, so I'm curious if there's another interesting possible answer coming. In the meantime, instead of using a url, you can embed the image itself into the message, by base64 encoding it. So, instead of:

"url": "https://806168b00b02.ngrok.io/myimage"

try (this is just an example image)

"url": "data:image/png;base64,iVBORw0KGgoAAA ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU 5ErkJggg==",

base64 encoding, if you haven't done it before, is quite trivial on most platforms, just Google it.

user_86013720

This is definitely a bug in MS Teams, meanwhile what does help is making another reply right after the adaptive card with the image, this replies triggers force update and the image gets fully loaded, it's a bit clunky, but it works

Try to first post an image

{
    "type": "AdaptiveCard",
    "version": "1.2",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "body": [
        {
            "type": "Image",
            "url": "https://806168b00b02.ngrok.io/myimage"
        }
    ]
}

and right after post anything else in my case list of actions

{
    "type": "AdaptiveCard",
    "version": "1.2",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "Open Me",
            "url": "https://www.google.com/"
        }
    ]
}
user_84048800
Related