图片

1. 组件概述

图片是一个内容展示组件，用于在页面上显示单张图片。它支持设置图片地址、标题、描述，还可以开启点击放大功能查看原图。图片组件是构建可视化内容的基础元素，适用于展示 AI 生成的图片、教学素材、用户头像等各种图片展示场景。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：展示 AI 生成的图片。在图像生成类应用中，用户输入描述后，工作流调用 AI 生成图片并返回图片地址。将图片组件的「图片地址」绑定到工作流返回的变量，即可自动展示生成结果。建议开启「图片放大功能」，方便用户查看细节。
• 场景二：展示教学素材图片。在知识讲解类应用中，需要配合文字展示相关的图片素材（如历史人物画像、科学实验示意图等）。设置「图片标题」和「图片描述」可以为图片添加说明文字，帮助学生理解图片内容。

加载中...

查看 JSON

复制 JSON

3. 功能配置

基础

地址折叠组

配置项	说明
图片地址	设置要显示的图片的 URL 地址。可以设置为静态地址，也可以绑定变量。如果图片地址来自工作流返回的结果，绑定对应变量即可自动更新显示。

配置折叠组

配置项	说明
图片标题	显示在图片下方的标题文字，用于简要说明图片内容。可以设置为静态文字或绑定变量。
宽度	设置图片的显示宽度，单位为像素。不设置时图片按原始比例显示。
高度	设置图片的显示高度，单位为像素。不设置时图片按原始比例显示。
图片放大功能	开启后，鼠标悬停在图片上会显示放大图标，点击可在弹窗中查看大图。适用于需要查看图片细节的场景。注意：此功能与「打开外部链接」功能冲突，若需点击图片跳转链接，请关闭此功能。开启后可额外设置「原图地址」，指定一张更高清的大图用于放大查看。

高级

配置折叠组

配置项	说明
图片描述	显示在图片标题下方的描述文字，用于补充说明图片的详细信息。可以设置为静态文字或绑定变量。
展示模式	控制图片的展示方式。「缩略图」模式会根据设置的宽高裁剪或缩放图片；「原图」模式则按图片原始尺寸显示。默认为缩略图模式。
缩略图地址	当展示模式为缩略图时，可以单独设置一张小尺寸的缩略图地址，用于列表展示等场景，点击放大时再加载原图。
假数据图片	仅在编辑器中显示的模拟图片，用于设计预览。实际运行时会显示真实的图片内容。
打开外部链接	设置点击图片后跳转的链接地址。此功能在编辑器预览时不生效，需要发布后才能使用。注意：此功能与「图片放大功能」冲突，需先关闭放大功能才能使用。
占位图	当图片地址为空或加载失败时显示的替代图片。建议设置一张默认图片，避免页面出现空白或错误状态。
放大极限	通过动作调整图片大小时，允许放大的最大百分比。默认为 200，即最大放大到原始尺寸的 2 倍。
缩小极限	通过动作调整图片大小时，允许缩小的最小百分比。默认为 50，即最小缩小到原始尺寸的一半。

状态折叠组

配置项	说明
可见	控制图片组件是否显示。默认可见，可以绑定变量实现动态控制。
隐藏	控制图片组件是否隐藏。与「可见」相反。

事件折叠组

配置项	说明
添加事件	支持「点击」、「鼠标移入」、「鼠标移出」三种触发事件。点击事件可用于触发工作流或执行其他动作；鼠标移入/移出事件可用于实现悬停效果。

设计

基本折叠组

配置项	说明
显示类型	控制图片在页面布局中的显示方式。「行内块」使图片与其他元素并排显示；「块级」使图片独占一行。
展示模式	控制缩略图的填充方式。「宽度占满」使图片宽度撑满容器；「高度占满」使图片高度撑满容器；「包含」保持图片完整显示在容器内；「铺满」使图片完全覆盖容器（可能裁剪）。
尺寸	快捷设置图片的整体尺寸大小。

图片折叠组

配置项	说明
边距	设置图片的外边距和内边距。
圆角	设置图片的圆角大小，可以让图片显示为圆角矩形或圆形。
背景	设置图片容器的背景色。
边框	设置图片的边框样式、颜色和粗细。
阴影	为图片添加阴影效果，增强立体感。

其他折叠组

配置项	说明
标题文字	设置图片标题的字体样式，包括字号、字重、颜色等。
标题边距	设置图片标题的边距。
描述文字	设置图片描述的字体样式，包括字号、字重、颜色等。
描述边距	设置图片描述的边距。
放大图标	自定义鼠标悬停时显示的放大图标。
左切换图标	在图片放大查看时，自定义向左切换的图标。
右切换图标	在图片放大查看时，自定义向右切换的图标。
切换图标大小	设置放大查看时左右切换图标的大小。