Skip to main content

图片

图片组件用于在页面中展示一张图片，并可在图片上叠加标题与副标题，常作为页面顶部横幅或卡片头图。

概述​

将「图片」拖入画布后，在属性抽屉中配置图片高度、图片来源与叠加文字。图片来源支持两种方式：

  • 网络图片地址：直接填写图片 URL，也可通过「选择图片」从图库中挑选。
  • 上传文件：从本地上传图片，自动保存文件 ID。

取图时优先使用网络图片地址；地址为空时才使用上传文件 ID。图片上会叠加一层遮罩色，并居中显示标题与副标题（副标题字号固定为 20px）。

配置项​

配置项说明
高度图片高度（px），取值 30 ~ 1000，步长 10，默认 150
网络图片地址图片 URL，优先级高于上传文件
选择图片从图库中挑选一张图片，自动填充网络图片地址
上传文件从本地上传图片，得到文件 ID
遮罩颜色图片上叠加的遮罩色，用于提升文字可读性
标题图片上叠加的主标题
副标题图片上叠加的副标题
标题颜色叠加文字的颜色
字号主标题字号（px），取值 10 ~ 100，默认 30

使用建议​

  1. 图片上叠加文字时，适当加深遮罩颜色以保证文字清晰。
  2. 网络地址与上传文件同时配置时，以网络地址优先。

下一步​

属性明细​

以下内容面向技术实现与 AI 检索。所有 meta 键值均以字符串形式存储。

组件属性（meta）​

属性名类型含义取值/存储值
Heightstring(number)图片高度（px）30 ~ 1000，步长 10，默认 150
WebImageUrlstring网络图片地址URL，优先于 FileId
FileIdstring(GUID)上传文件 ID通过 /api/Biz/Upload 上传获得，默认空
OverlayColorstring遮罩颜色默认 rgba(0, 0, 0, 0.1)
Titlestring叠加主标题文本，用户态支持系统环境变量占位符
SubTitlestring叠加副标题文本，用户态支持系统环境变量占位符，固定字号 20px
TitleColorstring叠加文字颜色默认 rgba(255, 255, 255, 1)
TitleFontSizestring(number)主标题字号（px）10 ~ 100，默认 30

GetSidebarItemMeta() 默认写入 Height（150）与 FileId（空字符串），其余键在用户配置后写入。uid 固定为 d9cc3b61-c678-43d5-b35b-c7616eefc37d。

存储示例​

组件通常位于列（Column）内，以下为嵌套在行（Row）→ 列（Column）中的完整存储结构：

{
  "id": "d4e5f6a7-0001-4a2b-8c3d-1234567890ab",
  "uid": "5a0f3c1e-9b8d-4f6a-9c2e-7d1b4a8e6f3d",
  "dragType": "Row",
  "originalType": "Row",
  "widgetType": "Row",
  "widgetTypeName": "基础容器",
  "meta": {
    "ColumnSpace": "5"
  },
  "children": [
    {
      "id": "d4e5f6a7-0002-4a2b-8c3d-1234567890ab",
      "uid": "7b9a905e-83d4-452b-83c8-694a3e0935e3",
      "dragType": "Column",
      "originalType": "Column",
      "widgetType": "Column",
      "widgetTypeName": "布局列组件",
      "meta": {
        "LayoutType": "vertical",
        "Align": "default",
        "ItemSpace": "5"
      },
      "children": [
        {
          "id": "d4e5f6a7-0003-4a2b-8c3d-1234567890ab",
          "uid": "d9cc3b61-c678-43d5-b35b-c7616eefc37d",
          "dragType": "Widget",
          "originalType": "Widget",
          "widgetType": "Image",
          "widgetTypeName": "图片",
          "meta": {
            "Height": "150",
            "WebImageUrl": "https://example.com/banner.png",
            "FileId": "",
            "OverlayColor": "rgba(0, 0, 0, 0.1)",
            "Title": "客户档案",
            "SubTitle": "客户管理",
            "TitleColor": "rgba(255, 255, 255, 1)",
            "TitleFontSize": "30"
          },
          "children": []
        }
      ]
    }
  ]
}