本页介绍了如何向卡片或对话框消息添加文本和图片，以及如何修改文本和图片在消息中的显示方式。
使用卡片构建器设计和预览聊天应用的 JSON 卡片消息：
打开卡片构建器前提条件
添加图片
Image 微件可显示托管在 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 微件表示内置图标或自定义图标。您可以通过以下方式在卡片消息和对话框中使用 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 错误。