Ms Teams移动端Hero Card按钮弹出图标不显示，网页版正常如何解决？

我为用户安装应用时展示的Hero Card按钮添加了弹出图标，代码如下：

CardFactory.heroCard(
  'Welcome to PeopleCues!',
  await this.getMessage(),
  [logo_url],
  [
    {
      type: ActionTypes.OpenUrl,
      title: 'connect',
      value: url,
      image: "https://okr-app-store.s3.ap-south-1.amazonaws.com/icons8-open-in-popup-32.png"
    }, 
    {
      type: ActionTypes.PostBack,
      title: 'Install app for all Org users',
      text: 'Install app for all Org users'
    },
    {
      type: ActionTypes.PostBack,
      title: 'help',
      text: 'help'
    }
  ]
);

该图标在Teams网页版中显示于按钮文本旁，但移动端应用中不显示，这是微软应用提交审核的必填修复项，需要解决移动端图标显示问题。

移动端显示效果 #

网页版显示效果 #

解决方法 #

方案1：改用自适应卡片（Adaptive Card） #

Hero Card的Action组件在Teams移动端的渲染逻辑与网页版存在天然差异，官方对自适应卡片的跨端支持更统一，能确保图标在移动端正常显示。将原有Hero Card重构为自适应卡片，示例代码如下：

{
  "type": "AdaptiveCard",
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.4",
  "body": [
    {
      "type": "TextBlock",
      "text": "Welcome to PeopleCues!",
      "size": "Large",
      "weight": "Bolder"
    },
    {
      "type": "TextBlock",
      "text": "替换为你的消息内容"
    },
    {
      "type": "Image",
      "url": "你的logo_url",
      "altText": "Logo"
    }
  ],
  "actions": [
    {
      "type": "Action.OpenUrl",
      "title": "connect",
      "url": "你的跳转url",
      "iconUrl": "https://okr-app-store.s3.ap-south-1.amazonaws.com/icons8-open-in-popup-32.png"
    },
    {
      "type": "Action.Submit",
      "title": "Install app for all Org users",
      "data": {
        "text": "Install app for all Org users"
      }
    },
    {
      "type": "Action.Submit",
      "title": "help",
      "data": {
        "text": "help"
      }
    }
  ]
}

使用自适应卡片后，按钮图标在Teams移动端和网页版都会正常显示，符合审核要求。

方案2：优化Hero Card图片（备选） #

如果必须保留Hero Card，可以尝试调整图片参数：

• 图片尺寸严格设置为32×32像素（Teams官方推荐的按钮图标尺寸）
• 图片格式使用PNG/JPG，文件大小控制在10KB以内
• 确保图片URL是公开可访问的，无权限或跨域限制

但需注意，即使满足以上条件，Teams移动端仍可能忽略Hero Card Action的图片属性，这是组件本身的跨端渲染限制，此方案无法保证100%解决问题。

内容的提问来源于stack exchange，提问作者akib