本页介绍了如何向卡片或对话框消息添加文本和图片，以及如何修改消息和图片在消息中的显示方式。
使用卡片制作工具设计和预览卡片。
打开卡片制作工具前提条件
添加图片
Image widget 会显示托管在 HTTPS 网址上的 PNG 或 JPG 图片。所显示图片的宽度会填满所显示卡片的整个宽度，并会调整其高度以保持图片的宽高比。Image widget 支持用户点击图片时发生的 onclick 操作。onclick 操作的示例包括：
- 打开包含
OpenLink的超链接，例如指向 Google Chat 开发者文档的超链接https://developers.google.com/chat。 - 运行运行自定义函数的操作，例如调用 API。
Image widget 具有以下限制：
- 仅支持 PNG 和 JPG 图片。
- 主机网址必须是
HTTPS。 - 为了确保卡片性能良好，建议的图片大小上限为 2MB。
下面是一个包含 Image widget 的卡片。其中显示了 Google Chat 开发者文档着陆页图片。用户点击该图片后，系统会在新标签页中打开 Google Chat 开发者文档。
添加图片组件
Image widget 是一幅样式受限的图片。借助 imageCompent widget，您可以将 cropStyle 和 borderStyle 应用于图片。
以下示例在剪裁了其中一张图片的网格中显示两张图片：
剪裁图片
您可以通过应用 cropStyle 来调整图片的形状。有几种形状可以应用到图像：
- 使用
SQUARE可应用方形剪裁。 - 使用
CIRCLE应用圆形剪裁。 - 使用
RECTANGLE_CUSTOM可应用采用自定义宽高比的矩形剪裁。例如，您可以使用RECTANGLE_4_3应用宽高比为 4:3 的矩形剪裁。
以下示例在网格中显示五张图片，对每张图片应用了不同的 cropStyle：
添加图标
Icon widget 代表内置图标或自定义图标。您可以通过以下方式在卡片消息和对话框中使用 Icon：
- 显示独立的图标。
- 作为
DecoratedTextwidget 的一部分，在相关文本前面显示图标。 - 将图标显示为互动按钮，作为
ButtonListwidget 的一部分。
以下卡片由一个带有内置图标的 Icon 组件组成：
下表列出了可用于卡片消息的内置图标：
| 飞机 | BOOKMARK | ||
| BUS | 汽车 | ||
| 时钟 | CONFIRMATION_NUMBER_ICON | ||
| 说明 | 美元 | ||
| 电子邮件 | EVENT_SEAT | ||
| FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
| 酒店 | HOTEL_ROOM_TYPE | ||
| 邀请 | MAP_PIN | ||
| 会员 | MULTIPLE_PEOPLE | ||
| 个人 | 手机 | ||
| RESTAURANT_ICON | SHOPPING_CART | ||
| 加星标 | 商店 | ||
| 票券 | TRAIN | ||
| VIDEO_CAMERA | VIDEO_PLAY |
添加带格式文本的段落
TextParagraph widget 会显示一段带有可选 HTML 格式的文本段落。设置这些 widget 的文本内容时，只需添加相应的 HTML 标记即可。如需详细了解支持的 HTML 标记，请参阅卡片文本格式。
例如，段落文本可以使用以下格式：
- 使用 HTML
<b>、<u>、<i>标记显示粗体、带下划线或斜体文字。 - 链接到包含 HTML
<a href="https://www.google.com">hyperlinks</a>的网站。 - 使用 HTML
<font color="#ea9999">font tags</font>添加一些颜色。
每个 TextParagraph widget 都会呈现为一个新段落，可以将其视为类似于 HTML <p> 标记。
以下卡片包含两个 TextParagraph widget，用于显示两个采用简单 HTML 格式的段落：
显示带有装饰元素的文字
DecoratedText widget 会显示包含可选布局和功能的文本。例如：
- 使用
startIcon在文本前面显示icon。 - 使用
topLabel在文本前面显示标题。 - 使用
button添加可点击的按钮，或使用switchControl添加可切换的切换开关。
如果您需要以易于使用且交互式的方式呈现信息，请使用 DecoratedText widget。该微件非常适合名片、订单状态更新和工作工单通知等用例。
DecoratedText widget 支持简单的文本 HTML 格式设置。设置这些 widget 的文本内容时，只需添加相应的 HTML 标记即可。如需详细了解支持的 HTML 标记，请参阅卡片文本格式。
以下卡片由一个 DecoratedText widget 组成，用于显示电子邮件地址、在线状态、电话号码和网站等详细联系信息：
问题排查
当 Google Chat 应用或卡片返回错误时，Chat 界面会显示“出了点问题”或“无法处理您的请求”的消息。有时，Chat 界面不会显示任何错误消息，但 Chat 应用或卡片会产生意外结果；例如，卡片消息可能不会显示。
虽然 Chat 界面中可能不会显示错误消息，但当为 Chat 应用启用错误日志记录功能时，您可以借助描述性错误消息和日志数据修正错误。如需查看、调试和修正错误方面的帮助，请参阅排查并修正 Google Chat 错误。