0

我们正在尝试使用 MS-Teams 上的自适应卡创建一个机器人。使用自适应卡片设计器的预览会根据需要提供正确的图像。但在 Teams 应用程序中使用时,图像看起来完全失真。

设计器中的预览图像: 在此处输入图像描述

MS 团队应用程序中的图像输出: 在此处输入图像描述

以下是用于自适应卡的 Json:

{
"type": "AdaptiveCard",
"body": [
    {
        "type": "TextBlock",
        "text": "Howdy!",
        "weight": "Bolder",
        "color": "Accent",
        "size": "Large"
    },
    {
        "type": "TextBlock",
        "text": "How are you doing today? ",
        "wrap": true
    },
    {
        "type": "ColumnSet",
        "columns": [
            {
                "type": "Column",
                "width": "stretch",
                "items": [
                    {
                        "type": "Image",
                        "url": "https://howdy1.blob.core.windows.net/sample/2-removebg-preview.png",
                        "selectAction": {
                            "type": "Action.Submit",
                            "data": {
                                "rating": "awful",
                                "comment": ""
                            },
                            "title": "awful"
                        },
                        "size": "Large",
                        "width": "700px",
                        "height": "60px"
                    }
                ]
            },
            {
                "type": "Column",
                "width": "stretch",
                "items": [
                    {
                        "type": "Image",
                        "url": "https://howdy1.blob.core.windows.net/sample/3-removebg-preview.png",
                        "selectAction": {
                            "type": "Action.Submit",
                            "data": {
                                "rating": "bad",
                                "comment": ""
                            },
                            "title": "bad"
                        },
                        "size": "Large",
                        "width": "700px",
                        "height": "60px",
                        "spacing": "None"
                    }
                ]
            },
            {
                "type": "Column",
                "width": "stretch",
                "items": [
                    {
                        "type": "Image",
                        "url": "https://howdy1.blob.core.windows.net/sample/1-removebg-preview.png",
                        "selectAction": {
                            "type": "Action.Submit",
                            "data": {
                                "rating": "ok",
                                "comment": ""
                            },
                            "title": "ok"
                        },
                        "size": "Large",
                        "width": "700px",
                        "height": "60px"
                    }
                ]
            },
            {
                "type": "Column",
                "width": "stretch",
                "items": [
                    {
                        "type": "Image",
                        "url": "https://howdy1.blob.core.windows.net/sample/5-removebg-preview.png",
                        "selectAction": {
                            "type": "Action.Submit",
                            "data": {
                                "rating": "good",
                                "comment": ""
                            },
                            "title": "good"
                        },
                        "size": "Large",
                        "width": "700px",
                        "height": "60px"
                    }
                ]
            },
            {
                "type": "Column",
                "width": "stretch",
                "items": [
                    {
                        "type": "Image",
                        "url": "https://howdy1.blob.core.windows.net/sample/4-removebg-preview.png",
                        "selectAction": {
                            "type": "Action.Submit",
                            "data": {
                                "rating": "terrific",
                                "comment": ""
                            },
                            "title": "terrific"
                        },
                        "size": "Large",
                        "width": "700px",
                        "height": "60px"
                    }
                ]
            }
        ]
    },
    {
        "type": "Input.Text",
        "placeholder": "Add a comment",
        "isMultiline": true,
        "id": "comment"
    }
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"actions": [
    {
        "type": "Action.Submit",
        "title": "OK",
        "data": {
            "rating": "",
            "comment": ""
        }
    }
]}

提前致谢!!

4

1 回答 1

0

移动评论回答:

此问题已修复,我们已检查并且工作正常。附上一段表情符号高度和宽度的代码。请保持宽度与高度一致。

{
"type": "AdaptiveCard",
"body": [
    {
        "type": "ColumnSet",
        "columns": [
            {
                "type": "Column",
                "width": "stretch",
                "items": [
                    {
                        "type": "Image",
                        "url": "https://howdy1.blob.core.windows.net/sample/2-removebg-preview.png",
                        "selectAction": {
                            "type": "Action.Submit",
                            "data": {
                                "rating": "awful",
                                "comment": ""
                            },
                            "title": "awful"
                        },
                        "size": "Large",
                        "width": "70px",
                        "height": "60px"
                    }
                ]
            }
        
        ]
    }
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
}
于 2022-01-11T11:51:14.253 回答