在 MS Teams 中部分渲染的自适应卡片图像答案

【问题标题】：Adaptive card image partially rendered in MS Teams在 MS Teams 中部分渲染的自适应卡片图像
【发布时间】：2021-03-27 22:08:19
【问题描述】：

我正在生成动态图像并将它们作为自适应卡片的一部分包含在内，图像相对较小，只有 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"
        }
    ]
}

有没有办法让图像第一次完全渲染？

【问题讨论】：

您能否将图像托管在this 或其他不会过期的服务上，这将有助于我重现此问题并在内部提出错误。
这个隧道在提问时是可用的，你可以使用任何公共图像，它没有任何区别
抱歉，这个帖子回复晚了，我刚刚尝试使用this 图像，第一次卡片折叠一秒钟然后图像出现，但从下一次它被缓存并出现一般。这是你提到的问题吗？
@Manish-MSFT 对我来说它从来没有第一次出现可能是 my image 更大，总的来说你是对的，当图像被缓存时它渲染得很好，但这不是一个选项对我来说，因为每次用户与之交互时我的机器人都会生成新图像
我已经为自适应卡片团队提出了一个错误。

标签： microsoft-teams adaptive-cards

【解决方案1】：

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

“网址”：“https://806168b00b02.ngrok.io/myimage”

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

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

base64 编码，如果你以前没有做过，在大多数平台上都是很简单的，只需谷歌它。

【讨论】：

让我试着回复你，谢谢你的回答
好吧，它并没有真正改变任何东西，图像仍然部分显示，除非我明确设置“高度”，但这很大程度上取决于屏幕分辨率并且不可靠

【解决方案2】：

这绝对是 MS Teams 中的一个错误，同时有帮助的是在带有图像的自适应卡之后立即做出另一个回复，这个回复会触发强制更新并且图像会完全加载，它有点笨拙，但它可以工作

尝试先张贴图片

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

在我的案例列表中发布任何其他内容之后

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

【讨论】：