【问题标题】:BotFrameworkV4- Images are not getting displayed in the Adaptive Card in Microsoft TeamsBot Framework V4 - 图像未显示在 Microsoft Teams 的自适应卡片中
【发布时间】:2020-10-21 13:41:41
【问题描述】:

我刚刚开始使用 BotFramework。我正在尝试在 Microsoft Teams 中显示自适应卡片,并且正在使用从 https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/csharp_dotnetcore/50.teams-messaging-extensions-search 下载的代码

我看到响应 JSON 中返回的图像 URL 是正确的,我可以将其粘贴到浏览器中,图像显示正常,但在卡片中,图像显示为“未定义”。我看到 Teams 将 URL 更改为 - https://urlp.asm.skype.com/v1/url/content?url=[original_url]

我尝试将 Azure Blob 防火墙设置更改为“允许所有网络”,并将我的应用程序域和 urlp.asm.skype.com 添加到 manifest.json 中的 validDomains[] 配置中,但我仍然有我的图片有问题。

我使用的 JSON 如下 - ${thumbnailurl} 包含缩略图的 url。

{
  "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"
    }
  ]
}

非常感谢您在此提供的意见。 谢谢!

【问题讨论】:

  • 欢迎来到 Stack Overflow。你的问题是什么?请查看方便的指南,了解您可以采取哪些步骤来更快地获得更好的答案:stackoverflow.com/help/how-to-ask
  • 您似乎在向我们展示自适应卡片模板。数据应用后,您能向我们展示实际的卡吗?如果您不希望我们看到真实的东西,您可以使用虚拟数据,但它必须是您可以重现问题的实际图像 URL。
  • 你还在做这个吗?
  • @KyleDelaney - 我更新了我的问题中的 json。我已经测试过,如果我使用可用于公共访问的 URL,如下所示,图像显示得很好。 img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/…
  • 我的回答可以接受吗?

标签: json image botframework microsoft-teams adaptive-cards


【解决方案1】:

团队无法访问该图像。您希望几乎任何频道客户端显示的任何图像都需要可公开访问。使用公共图片网址。

【讨论】:

  • 谢谢凯尔!问题是 Web 应用程序按需呈现缩略图图像,并且它们不能公开访问。我想没有解决方法。
  • 当然有解决办法。只需让您的 Web 应用程序使用公共地址将图像上传到某个地方。您可以使用自己的网站,例如托管机器人的网站,也可以使用 Imgur 之类的网站:apidocs.imgur.com
猜你喜欢
  • 1970-01-01
  • 2019-10-11
  • 2019-07-18
  • 1970-01-01
  • 2020-02-14
  • 1970-01-01
  • 2020-05-07
  • 2019-01-18
  • 2022-01-08
相关资源
最近更新 更多