BotFrameworkV4- Images are not getting displayed in the Adaptive Card in Microsoft Teams

Question

I'm just beginning to work with BotFramework. I'm trying to display an Adaptive Card in Microsoft Teams and I'm working with the code I downloaded from https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/csharp_dotnetcore/50.teams-messaging-extensions-search

I see that the image URL being returned in the response JSON is correct and I can paste it in the browser and the image displays just fine, but in the card, the image is displayed as "undefined". I see that Teams changes the URL to - https://urlp.asm.skype.com/v1/url/content?url=[original_url]

I've tried changing the Azure Blob Firewall settings to "Allow All Networks" and I have added my application domain and urlp.asm.skype.com to the validDomains[] configuration in the manifest.json, but I still have the issue with my images.

The JSON I'm using is as follows - the ${thumbnailurl} contains the url to the thumbnail image.

{
  "type": "AdaptiveCard",
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.2",
  "backgroundImage": "https://www.beautycolorcode.com/abcdef.png",
  "body": [
    {
      "type": "Container",
      "items": [
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "width": "auto",
              "items": [
                {
                  "type": "Image",
                  "size": "large",
                  "style": "default",
                  "width": "100px",
                  "spacing": "extraLarge",
                  "url": "http://<myHostname>/xdownload/thumbnail/%257B%2522app%2522%253A%2522NH-vanilla-search%2522%252C%2522id%2522%253A%2522%255C%252FFS%255C%252FDemo%2BFiles%255C%252F%257CEnron%2BData%255C%252Fenron1992.pdf%2522%257D/file.jpg"
                }
              ]
            },
            {
              "type": "Column",
              "width": "stretch",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "Enron Documents 1992 ENRON CORP",
                  "wrap": true,
                  "color": "accent",
                  "size": "medium",
                  "weight": "bolder",
                  "spacing": "padding",
                  "fontType": "default",
                  "horizontalAlignment": "left"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "type": "Container",
      "items": [
        {
          "type": "TextBlock",
          "text": "DC 20585 | 5 -- ': ... L. Lay Chairman and CEO **Enron** Corporation\r\nP.O. Box 1188 Houston, ... 1992, and for your comments... fired\r\nelectricity generation over the ... gas prices currently offered by\r\n**Enron** and others. Natural gas power ... coal or nuclear plants. In\r\naddition... America's strengths to achieve aggressive ... L. Lay,\r\nchairman and CEO of **Enron** Corp., in testimony today before the ...\r\nproductivity, prosperity and global leadership\r\n",
          "wrap": true,
          "maxLines": 6,
          "spacing": "padding",
          "fontType": "default",
          "weight": "default",
          "size": "small"
        }
      ]
    },
    {
      "type": "FactSet",
      "facts": [
        {
          "title": "Source:",
          "value": "\r\n  /File System/Sample Data/Enron Data/\r\n"
        },
        {
          "title": "Format:",
          "value": "pdf"
        },
        {
          "title": "Relevancy:",
          "value": "85.04401%"
        }
      ],
      "separator": true,
      "spacing": "extraLarge"
    }
  ],
  "actions": [
    {
      "type": "Action.OpenUrl",
      "title": "Document Preview",
      "url": "http://<myHostname>/app/NH-vanilla-search/#/preview?id=%2FFS%2FDemo+Files%2F%7CEnron+Data%2Fenron1992.pdf&query=%7B%22name%22%3A%22Custom_Query%22%2C%22text%22%3A%22enron+data%22%7D",
      "style": "positive",
      "width": "stretch"
    }
  ]
}

I'd greatly appreciate your inputs here. Thanks!

Welcome to Stack Overflow. What is your question? Please have a look at the handy guide to see the steps you can take to get a better answer faster: stackoverflow.com/help/how-to-ask — Kyle Delaney
It looks like you're showing us an Adaptive Card template. Can you show us the actual card after the data has been applied? You can use dummy data if you don't want us to see the real stuff, but it needs to be an actual image URL that you can reproduce the problem with. — Kyle Delaney
@KyleDelaney - I updated the json in my question. i've tested that if I use a URL available for public access like the one below , the image displays just fine. img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/… — NSH2020

Kyle Delaney Kyle Delaney · Accepted Answer · 2020-07-10T21:31:36

Teams cannot access that image. Any image you expect pretty much any channel client to display will need to be publicly accessible. Use a public image URL.

BotFrameworkV4- Images are not getting displayed in the Adaptive Card in Microsoft Teams

1 Answers