此页面由 Cloud Translation API 翻译。

向卡片中添加文字和图片

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

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

使用卡片构建器设计和预览 Chat 应用的消息和界面：

打开卡片构建器

前提条件

已配置为接收和响应互动事件的 Google Chat 应用。如需创建交互式 Chat 应用，请根据要使用的应用架构完成以下任一快速入门 Codelab：

添加图片或图标

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

添加图片

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 组件的卡片：

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

	AIRPLANE		书签
	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		STORE
	TICKET		TRAIN
	VIDEO_CAMERA		VIDEO_PLAY

向卡片添加文字

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

添加一段格式化文本

TextParagraph widget 用于显示一段文本，并可选择性地添加 HTML 格式。设置这些 widget 的文本内容时，只需添加相应的 HTML 标记即可。如需详细了解支持哪些 HTML 代码，请参阅设置卡片中显示的文本的格式。

例如，段落文字可采用以下格式：

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

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

以下卡片包含两个 TextParagraph widget，用于显示两个具有简单 HTML 格式的段落：

添加可收起的文本段落

用户可以根据需要展开折叠式文本段落，查看更多信息。此 widget 非常适合呈现长篇内容或可在选择时探索的更多详情，从而打造动态且互动的用户体验。

显示带有装饰元素的文字

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

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

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

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

以下卡片包含一个 DecoratedText widget，用于显示电子邮件地址、在线状态、电话号码和网站等联系信息：

问题排查

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

虽然聊天界面中可能不会显示错误消息，但当为聊天应用启用错误日志记录功能后，系统会提供描述性错误消息和日志数据，帮助您修复错误。如需有关查看、调试和修复错误的帮助，请参阅排查和修复 Google Chat 错误。

向卡片中添加文字和图片 使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。