Adaptive card image partially rendered in MS Teams

1
votes

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?

2
microsoft-teamsadaptive-cards
Can you please host the image on this or another service which doesn't expire, This will help me to repro this issue and raise a bug internally. – Manish-MSFT
This tunnel was available at the time of the question, you can use any public image, it doesn't make any difference – hdmiimdh
Sorry for late reply on this thread, I just tried using this image, for the first time the card collapses for a second and then the image apprears, but from next time it's cached and it apprears normally. Is that an issue which you are mentioning? – Manish-MSFT
@Manish-MSFT for me it never appears for the first time might be my image is larger, overall you're right that when the image is cached it renders fine, BUT this is not an option for me, since my bot makes new image every time user interacts with it – hdmiimdh
I have raised a bug for this with adaptive card team. – Manish-MSFT

2 Answers

0
votes

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.

0
votes

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/"
        }
    ]
}