# 图片
图片是媒体组件的一种，用于直接展示需要呈现的图片数据。
在高级页面设计器中，单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960287453.png)，从"媒体 \> 通用"中，拖拽"图片"组件到画布中，如[图1]所示。
图1图片   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888932.png "点击放大")
#### 属性
在属性中，设置图片组件的位置、边框、连接器等。
图2属性   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888916.png "点击放大")
- 基础
  - 组件标题：设置组件的标题。
  
  - 组件名称：设置组件的名称。
   
- 位置
  - 距离左端：组件到页面左侧的距离，单位为px。
  
  - 距离顶端：组件到页面顶部的距离，单位为px。
  
  - 宽度：组件的宽度，单位为px。
  
  - 高度：组件的高度，单位为px。
  
  - 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是"1"，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为"0"。
  
  - 自适应高度：组件的高度是否随宽度改变。
   
- 边框：设置组件的边框样式，如全边框或角边框。
- 背景
  - 样式：设置背景的样式，如普通、居中、拉伸等。
  
  - 图片链接：背景图片URL。
  
  - 颜色：设置背景的颜色。
   
- 自定义属性列表：显示组件的自定义属性。
- 图片地址：直接输入图片地址，来展示图片。
- 连接器设置
  - 使用连接器：是否使用连接器。
  
  - 选择连接器类型：选择有存储功能的，支持OBS、MINIO和对象存储代理。
  
  - 选择连接器：选择具体的连接器实例。
  
  - 选择桶：连接器的存储桶。
  
  - 使用相对地址：使用图片的相对路径。
   
 
#### 高级设置
在高级设置中，可设置图片填充类型。
图3高级设置   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933048308.png)
图4图片设置页面   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960127645.png "点击放大")
图5上传图片/视频   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960287437.png)
- 单击"选择图片"，在页面单击目录后的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933048320.png)和![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001933048324.png)，可管理图片目录。单击"上传图片/视频"，可进行上传操作。
- 选择"填充"表示图片不保证保持原有比例，图片拉伸填满整个容器。
- 选择"包含"表示图片保持原有尺寸比例，可能会在容器内留有空白。
- 选择"覆盖"表示图片保持原有尺寸比例，宽高至少有一个和容器一致，可能会让图片部分区域不可见。
- 选择"无"表示图片保持原有尺寸比例，同时保持图片原始尺寸大小。
 
#### 数据
在数据中，设置组件的数据来源。更多介绍，请参见[如何调用后台接口](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0192.html)。
图6设置组件数据   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001932888924.png "点击放大")
#### 事件
在事件中，可查看组件可配置的事件列表。更多关于事件的介绍，请参见[初识事件-动作](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_0167.html)。
图7设置事件   
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960287433.png "点击放大")