此页面由 Cloud Translation API 翻译。

向卡片中添加文字和图片

本页介绍了如何向卡片添加文字和图片并设置其格式。

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

使用卡片构建器设计和预览聊天应用的 JSON 卡片消息：

打开卡片制作工具

前提条件

一款已启用互动功能的 Google Chat 应用。要创建交互式 Chat 应用，请完成以下快速入门之一针对您要使用的应用架构：

添加图片或图标

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

添加图片

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 代表内置图标或自定义图标。您可以通过向卡片添加图标来执行以下任何操作：

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

下面是一张卡片，由带有内置图标的 Icon 组件组成：

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

	飞机		书签
	公交车		汽车
	时钟		CONFIRMATION_NUMBER_ICON
	说明		美元
	电子邮件		EVENT_SEAT
	FLIGHT_ARRIVAL		FLIGHT_DEPARTURE
	酒店		HOTEL_ROOM_TYPE
	邀请		MAP_PIN
	会员资格		MULTIPLE_PEOPLE
	用户		电话
	RESTAURANT_ICON		SHOPPING_CART
	STAR		商店
	票		训练
	VIDEO_CAMERA		VIDEO_PLAY

向卡片中添加文本

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

添加一段设置了格式的文本

通过 TextParagraph widget ，用于显示带有可选 HTML 格式的文本段落。设置这些微件的文本内容，只需添加相应的 HTML 标记即可。有关支持的 HTML 代码的详情，请参见设置卡片中显示的文字的格式。

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

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

每个 TextParagraph widget 都会渲染为一个新段落，并且可以视为类似于 HTML  标记。

以下是一张卡片，由两个 TextParagraph widget 组成，用于使用简单的 HTML 格式展示两个段落：

添加可收起的文本段落

可收起的文本段落使用户能够按需显示更多信息。此微件非常适合展示冗长的内容或其他详细信息，选择后可以进行浏览，从而创建一个动态的互动用户体验。

包含装饰元素的显示文本

通过 DecoratedText widget 用于显示带有可选布局和功能的文本。例如：

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

如果您需要在DecoratedText 和互动方式。该微件非常适合名片、订单状态更新和工作工单通知。

DecoratedText widget 支持简单的文本 HTML 格式。设置这些微件的文本内容，只需添加相应的 HTML 标记即可。对于有关支持的 HTML 代码的详情，请参见卡片文字格式。

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

问题排查

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

虽然 Chat 界面中可能不会显示错误消息，提供描述性错误消息和日志数据，以帮助您修正错误启用 Chat 应用的错误日志记录时。如需观看方面的帮助，请参阅排查并修正 Google Chat 错误。