此页面由 Cloud Translation API 翻译。

向卡片中添加文字和图片

本页介绍了如何向卡片添加文本和图片以及如何设置文本和图片的格式。

如需详细了解如何构建卡片，请参阅为 Google Chat 应用构建卡片。

使用卡片制作工具设计和预览 Chat 应用的消息和界面：

打开卡片制作工具

前提条件

启用了交互功能的 Google Chat 应用。如需创建交互式 Chat 应用，请根据您要使用的应用架构完成以下任一快速入门：

添加图片或图标

本部分介绍了如何向卡片添加视觉元素，例如图片、图片组件和图标。

添加图片

Image 微件会显示托管在 HTTPS 网址上的 PNG 或 JPG 图片。显示的图片的宽度会填满显示的卡片的整个宽度，其高度会调整以保持图片的宽高比。Image 微件支持用户点击图片时发生的 onclick 操作。onclick 操作示例包括：

使用 OpenLink 打开超链接，例如指向 Google Chat 开发者文档 https://developers.google.com/chat 的超链接。
运行用于运行自定义函数的操作，例如调用 API。

Image 微件具有以下限制：

仅支持 PNG 和 JPG 图片。
主机网址必须为 HTTPS。
为确保卡片的性能，建议的图片大小上限为 2MB。

以下是一个由 Image 微件组成的卡片。它会显示 Google Chat 开发者文档着陆页图片。用户点击该图片后，Google Chat 开发者文档会在新标签页中打开。

添加图片组件

Image 微件是一种样式有限的图片。借助 imageCompent 微件，您可以对图片应用 cropStyle 和 borderStyle。

以下示例展示了网格中的两张图片，其中有一张图片经过了剪裁：

您可以通过应用 cropStyle 来调整图片组件的形状。您可以对图片应用多种形状：

使用 SQUARE 应用方形剪裁。
使用 CIRCLE 应用圆形剪裁。
使用 RECTANGLE_CUSTOM 应用采用自定义宽高比的矩形剪裁。例如，您可以使用 RECTANGLE_4_3 应用宽高比为 4:3 的矩形剪裁。

以下示例展示了网格中的五张图片，每张图片都应用了不同的 cropStyle：

添加图标

Icon widget 表示内置图标或自定义图标。您可以向卡片添加图标，以执行以下任一操作：

显示独立图标。
在 DecoratedText 微件的相关文本前面显示图标。
将图标作为互动按钮显示在 ButtonList widget 中。

以下卡片由包含内置图标的 Icon 组件组成：

下表列出了可用于卡片消息的内置图标：

	飞机		BOOKMARK
	BUS		CAR
	闹钟		CONFIRMATION_NUMBER_ICON
	说明		DOLLAR
	电子邮件地址		EVENT_SEAT
	FLIGHT_ARRIVAL		FLIGHT_DEPARTURE
	HOTEL		HOTEL_ROOM_TYPE
	邀请		MAP_PIN
	会员		MULTIPLE_PEOPLE
	PERSON		PHONE
	RESTAURANT_ICON		SHOPPING_CART
	STAR		商店
	TICKET		TRAIN
	VIDEO_CAMERA		VIDEO_PLAY

向卡片添加文本

本部分介绍了如何在卡片中添加和设置文本格式。

添加一段格式化的文本

TextParagraph 微件可显示带有可选 HTML 格式的段落文本。设置这些 widget 的文本内容时，只需添加相应的 HTML 标记即可。如需详细了解支持哪些 HTML 标记，请参阅设置卡片中显示的文本格式。

例如，段落文本可以使用以下格式设置：

使用 HTML 、、 标记显示粗体、带下划线或斜体文本。
使用 HTML <a href="https://www.google.com">hyperlinks</a> 链接到网站。
使用 HTML font tags 添加一些颜色。

每个 TextParagraph widget 都会呈现为一个新段落，可以视为类似于 HTML  标记。

以下卡片由两个 TextParagraph 微件组成，用于显示采用简单 HTML 格式的两段文字：

添加可收起的文本段落

用户可以通过可收起的文本段落按需查看更多信息。此微件非常适合呈现可在用户选择后浏览的长篇内容或其他详细信息，从而打造动态且互动的用户体验。

显示带有装饰元素的文本

DecoratedText 微件可显示具有可选布局和功能的文本。例如：

使用 startIcon 在文本前面显示 icon。
使用 topLabel 在文本前显示标题。
使用 button 添加可点击的按钮，使用 switchControl 添加可切换的切换开关。

当您需要以简单易用且互动的方式呈现信息时，请使用 DecoratedText widget。该 widget 非常适合用于联系信息卡片、订单状态更新和工单通知等用例。

DecoratedText 微件支持简单的文本 HTML 格式。设置这些 widget 的文本内容时，只需添加相应的 HTML 标记即可。如需详细了解支持哪些 HTML 标记，请参阅卡片文本格式。

以下卡片由一个 DecoratedText 微件组成，用于显示详细联系信息，例如电子邮件地址、在线状态、电话号码和网站：

问题排查

当 Google Chat 应用或卡片返回错误时，Chat 界面会显示“出了点问题”消息。或“无法处理您的请求”。有时，Chat 界面不会显示任何错误消息，但 Chat 应用或卡片会产生意外结果；例如，卡片消息可能不会显示。

虽然 Chat 界面中可能不会显示错误消息，但当 Chat 应用的错误日志记录功能处于开启状态时，描述性错误消息和日志数据可帮助您修正错误。如需有关查看、调试和修复错误的帮助，请参阅排查和修复 Google Chat 错误。