Adaptive card do not render image on Teams Desktop

Copper Contributor

Hello Community,

 

We are facing a challenge with the image rendering in our Adaptive cards only in the Teams Desktop application.

All is working fine with the Teams on the Web, and when we test it in the designer.

The images are stored in our SharePoint.

 

Will this be the problem ?

 

See bellow our json adaptive card, and some screenshots

 

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.3",
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "width": "stretch",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "Request No. ",
                                    "wrap": true,
                                    "size": "Small",
                                    "isSubtle": true,
                                    "horizontalAlignment": "Right"
                                }
                            ],
                            "backgroundImage": {
                                "horizontalAlignment": "Right"
                            },
                            "horizontalAlignment": "Right"
                        },
                        {
                            "type": "Column",
                            "width": "auto",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "44",
                                    "wrap": true,
                                    "size": "Small",
                                    "isSubtle": true,
                                    "horizontalAlignment": "Right"
                                }
                            ],
                            "horizontalAlignment": "Right"
                        }
                    ],
                    "horizontalAlignment": "Right"
                },
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "width": "stretch",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "wrap": true,
                                    "text": " Urgent - New Support Request",
                                    "horizontalAlignment": "Center",
                                    "size": "ExtraLarge",
                                    "weight": "Bolder",
                                    "color": "Warning",
                                    "spacing": "None",
                                    "height": "stretch"
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "type": "Container",
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "width": "auto",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "Requested by ",
                                    "wrap": true,
                                    "weight": "Bolder"
                                }
                            ],
                            "verticalContentAlignment": "Center"
                        },
                        {
                            "type": "Column",
                            "width": "auto",
                            "items": [
                                {
                                    "type": "Image",
                                    "size": "Small",
                                    "style": "Person",
                                    "url": "data:image/png;base64"
                                }
                            ]
                        },
                        {
                            "type": "Column",
                            "width": "stretch",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": " Doe, John",
                                    "wrap": true
                                }
                            ],
                            "verticalContentAlignment": "Center"
                        }
                    ]
                },
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "width": "auto",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "Location",
                                    "wrap": true,
                                    "weight": "Bolder"
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "Urgent",
                                    "wrap": true,
                                    "weight": "Bolder",
                                    "color": "Accent"
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "Issue With",
                                    "wrap": true,
                                    "weight": "Bolder"
                                }
                            ]
                        },
                        {
                            "type": "Column",
                            "width": "stretch",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "France",
                                    "wrap": true,
                                    "weight": "Bolder"
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "Yes",
                                    "wrap": true,
                                    "color": "Accent"
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "Office",
                                    "wrap": true
                                }
                            ]
                        }
                    ]
                },
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "width": "auto",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "Description",
                                    "wrap": true,
                                    "weight": "Bolder"
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "This is my error please help me",
                                    "wrap": true
                                }
                            ]
                        }
                    ]
                }
            ],
            "separator": true
        },
        {
            "type": "Container",
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "width": "stretch",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "Attachements",
                                    "wrap": true,
                                    "isSubtle": true
                                },
                                {
                                    "type": "ImageSet",
                                    "imageSize": "Large",
                                    "images":
                                        [
                                            {
                                                "type": "Image",
                                                "url": "SharePointURL",
                                                "selectAction": {
                                                    "type": "Action.OpenUrl",
                                                    "url": "SharePointURL"
                                                }
                                            },
                                            {
                                                "type": "Image",
                                                "url": "SharePointURL",
                                                "selectAction": {
                                                    "type": "Action.OpenUrl",
                                                    "url": "SharePointURL"
                                                }
                                            }
                                        ]
                                    
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "type": "ActionSet",
            "horizontalAlignment": "Left",
            "actions": [
                {
                    "type": "Action.ShowCard",
                    "title": "Complete",
                    "card": {
                        "type": "AdaptiveCard",
                        "body": [
                            {
                                "type": "TextBlock",
                                "text": "What was the error?",
                                "wrap": true
                            },
                            {
                                "type": "Input.Text",
                                "isMultiline": true,
                                "id": "error"
                            },
                            {
                                "type": "TextBlock",
                                "text": "What was the solution?",
                                "wrap": true
                            },
                            {
                                "type": "Input.Text",
                                "isMultiline": true,
                                "id": "solution"
                            }
                        ],
                        "actions": [
                            {
                                "type": "Action.Submit",
                                "title": "Send",
                                "id": "send",
                                "associatedInputs": "auto",
                                "data": {
                                    "action": "complete",
                                    "request": "44",
                                    "link": "Link to the SharePoint List",
                                    "issuewith": "Office"
                                }
                            }
                        ],
                        "verticalContentAlignment": "Top"
                    },
                    "id": "complete"
                },
                {
                    "type": "Action.Submit",
                    "title": "Handle",
                    "id": "handle",
                    "data": {
                        "action": "handle",
                        "request": "44",
                        "link": "Link to the SharePoint List",
                        "issuewith": "Office"
                    }
                },
                {
                    "type": "Action.Submit",
                    "title": "Create a task",
                    "id": "task",
                    "associatedInputs": "auto",
                    "data": {
                        "action": "task",
                        "request": "44",
                        "link": "Link to the SharePoint List",
                        "issuewith": "Office"
                    }
                }
            ],
            "height": "stretch",
            "separator": true
        }
    ]
}

 

 

 

 

 Teams DesktopTeams DesktopTeams on the WebTeams on the Web

Thank you for you help.

5 Replies

@jordanmatas - Thanks for raising your issue. We will check this at our end and will update you accordingly. Additionally, could you please let us know if this is happening in Teams classic or New Teams? And are you sending the card via Power Automate flow?

Dear @Prasad_Das-MSFT,

I can confirm with you that is happening in Teams Classic and New Teams.

We indeed post the card via Power Automate Flow as a Flow bot

Thank you

@jordanmatas - We have raised a bug for this. We will inform you once we get any further update from engineering team. 

 

 

 

Thanks, 

Prasad Das

------------------------------------------------------------------------------------------ 

If the response is helpful, please click "**Mark as Best Response**" and like it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate. 

Just to add some additional context to this, you will probably get the same result from any action that attempts to embed an image from SharePoint in Teams. I've tried 3 ways from Sunday, and it just won't work. My suspicion is the desktop client doesn't know how to interact with SharePoint to retrieve the content in question. I'd **love** to have this fixed ASAP.

PS: I've also asked Copilot, the answers there were no better. :)

@kevin zollinger , @jordanmatas 

We got update from engineering team that, this is by design - image requests are not sent with any auth token, which is why we request that all cards images be publicly available. 
As an alternative, you can convert the image to base64, or upload it to a publicly accessible image repository. 
 
 
 

Thanks, 

Prasad Das

------------------------------------------------------------------------------------------ 

If the response is helpful, please click "**Mark as Best Response**" and like it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate.