Search code examples
microsoft-teamsadaptive-cards

Adaptive card image partially rendered in MS Teams


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?


Solution

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