在 MS Teams 中部分呈现的自适应卡片图像

Question

我正在生成动态图像并将它们作为自适应卡片的一部分包含在内，图像相对较小，只有 60kb，当我第一次回复图像时，它会部分显示，直到我向上滚动或离开对话我假设触发本机更新，一旦图像被缓存它就正确加载，问题只出现在第一个渲染

{
    "type": "AdaptiveCard",
    "version": "1.2",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "body": [
        {
            "type": "TextBlock",
            "text": "Any text",
            "wrap": true
        },
        {
            "type": "Image",
            "url": "https://806168b00b02.ngrok.io/myimage"
        }
    ]
}

是否有解决方法让图像第一次完全渲染？

Answer 1

我也遇到过这个，有点痛苦，所以我很好奇是否还有另一个有趣的可能答案。同时，您可以通过 base64 编码将图像本身嵌入到消息中，而不是使用 url。所以，而不是：

"url": "https://806168b00b02.ngrok.io/myimage"

试试（这只是一个示例图片）

"url": "data:image/png;base64,iVBORw0KGgoAAA ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU 5ErkJggg==",

base64 编码，如果你以前没有做过，在大多数平台上都非常简单，只需 Google 即可。

Answer 2

这绝对是MS Teams中的一个bug，同时有帮助的是在带有图像的自适应卡片之后立即进行另一个回复，这个回复触发强制更新并且图像被完全加载，它有点笨拙，但它作品

尝试先post一张图片

{
    "type": "AdaptiveCard",
    "version": "1.2",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "body": [
        {
            "type": "Image",
            "url": "https://806168b00b02.ngrok.io/myimage"
        }
    ]
}

紧接着 post 我的案例操作列表中的任何其他内容

{
    "type": "AdaptiveCard",
    "version": "1.2",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "Open Me",
            "url": "https://www.google.com/"
        }
    ]
}

在 MS Teams 中部分呈现的自适应卡片图像

Adaptive card image partially rendered in MS Teams

microsoft-teams

adaptive-cards