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

Viewed 807

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.

enter image description here

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!

1 Answers

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.

Related