更新时间:2024-07-11 GMT+08:00
分享

图片

图片是媒体组件的一种,用于直接展示需要呈现的图片数据。

在高级页面设计器中,单击,从“媒体 > 通用”中,拖拽“图片”组件到画布中,如图1所示。

图1 图片

属性

在属性中,设置图片组件的位置、边框、连接器等。

图2 属性
  • 基础
    • 组件标题:设置组件的标题。
    • 组件名称:设置组件的名称。
  • 位置
    • 距离左端:组件到页面左侧的距离,单位为px。
    • 距离顶端:组件到页面顶部的距离,单位为px。
    • 宽度:组件的宽度,单位为px。
    • 高度:组件的高度,单位为px。
    • 堆叠顺序:设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”,数字越大,显示越靠前。当需要让组件置底时,可设置堆叠顺序为“0”。
    • 自适应高度:组件的高度是否随宽度改变。
  • 边框:设置组件的边框样式,如全边框或角边框。
  • 背景
    • 样式:设置背景的样式,如普通、居中、拉伸等。
    • 图片链接:背景图片URL。
    • 颜色:设置背景的颜色。
  • 自定义属性列表:显示组件的自定义属性。
  • 图片地址:直接输入图片地址,来展示图片。
  • 连接器设置
    • 使用连接器:是否使用连接器。
    • 选择连接器类型:选择有存储功能的,支持OBS、MINIO和对象存储代理。
    • 选择连接器:选择具体的连接器实例。
    • 选择桶:连接器的存储桶。
    • 使用相对地址:使用图片的相对路径。

高级设置

在高级设置中,可设置图片填充类型。

图3 高级设置
图4 图片设置页面
图5 上传图片/视频
  • 单击“选择图片”,在页面单击目录后的,可管理图片目录。单击“上传图片/视频”,可进行上传操作。
  • 选择“填充”表示图片不保证保持原有比例,图片拉伸填满整个容器。
  • 选择“包含”表示图片保持原有尺寸比例,可能会在容器内留有空白。
  • 选择“覆盖”表示图片表示原有尺寸比例,宽高至少有一个和容器一致,可能会让图片部分区域不可见。
  • 选择“无”表示图片保持原有尺寸比例,同时保持图片原始尺寸大小。

数据

在数据中,设置组件的数据来源。更多介绍,请参见如何调用后台接口

图6 设置组件数据

事件

在事件中,可查看组件可配置的事件列表。更多关于事件的介绍,请参见初识事件-动作

图7 设置事件

相关文档