User profile picture not rendered in adaptive card on Teams client app

[Wajeed-msft]

Copied bug from: https://github.com/microsoft/AdaptiveCards/issues/8687

Details from original post:

Target Platforms

Other

SDK Version

Adaptive Cards 1.3

Application Name

Microsoft Teams

Problem Description

When adding the user profile picture with url "/_layouts/15/userphoto.aspx" to an adaptive card, it renders in Teams via browser but not in the client app, which returns a 401 Unauthorised.

URL for the image: https://TENANT.sharepoint.com/_layouts/15/userphoto.aspx?size=S&accountname=USER_EMAIL@TENANT.onmicrosoft.com

Screenshots

Teams in browser: Teams app:

Card JSON

{
      "type": "AdaptiveCard",
      "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
      "version": "1.3",
      "body": [
        {
          "type": "Container",
          "items": [
            {
              "type": "ColumnSet",
              "spacing": "extraLarge",
              "columns": [
                {
                  "type": "Column",
                  "width": "36px",
                  "items": [
                    {
                      "type": "Image",
                      "url": "https://TENANT.sharepoint.com/_layouts/15/userphoto.aspx?size=S&accountname=USER_EMAIL@TENANT.onmicrosoft.com",
                      "width": "36px",
                      "style": "person"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }

Sample Code Language

No response

Sample Code

No response---

Document Details

⚠ Do not edit this section.It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 3fb4394d-25b1-8752-3996-fe3a2934732d
• Version Independent ID: 6d391381-89d0-117c-27cc-00043bd26a36
• Content: Cards reference - Teams
• Content Source: msteams-platform/task-modules-and-cards/cards/cards-reference.md
• Product: msteams
• GitHub Login: @surbhigupta12
• Microsoft Alias: surbhigupta12

[microsoft-github-policy-service[bot]]

Hi Wajeed-msft! Thank you for bringing this issue to our attention. We will investigate and if we require further information we will reach out in one business day. Please use this link to escalate if you don't get replies.

Best regards, Teams Platform

[Meghana-MSFT]

We will check this at our end, and it is rendering fine on both Teams Web and Teams desktop.

Could you please try with this URL once and let us know if you the same issue - https://connectorsdemo.azurewebsites.net/images/MSC12_Oscar_002.jpg?

[z3019494]

This is still the case on my end in Teams 2.1

[Meghana-MSFT]

@z3019494 - Could you please let us know if you are facing the issue with the URL I shared in above comment?

Could you please try with this URL once and let us know if you the same issue - https://connectorsdemo.azurewebsites.net/images/MSC12_Oscar_002.jpg?

[Ismael-Cruz]

I opened this issue in another section and it was moved here. This issue happens when using URLs from SharePoint, like the profile picture (userphoto.aspx), I've seen it as well with images from the SiteAssets library. If you use a picture hosted in any public CDN it will work.

The picture appears in Teams browser only because of cached content, once refreshing clearing cache the image does not appear. There must be something when trying to access the image in SharePoint being in Teams context.

If it helps for anyone having this issue, as a workaround we download the image in base64 dynamically and send it in our adaptive card using the hostedContents property.

[Meghana-MSFT]

As you rightly said, when you try to load an image within Adaptive Card using sharepoint url in the browser, the user has a signed-in session to SharePoint, but perhaps that's not respected in the Teams client.

Please note that the URL should be a public image link.

[microsoft-github-policy-service[bot]]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 3 days. It will be closed if no further activity occurs within 3 days of this comment.