# 图片
图片组件用于展示图片的UI元素，提供直观的视觉信息。
在左侧组件区域，从"常用控件"中，选择"图片"组件，并拖拽至设计区，如[图1]所示。
图1拖拽图片组件到设计区并设置属性   
![](https://support.huaweicloud.com/usermanual-astroflow/zh-cn_image_0000001962925038.png)
#### 基础配置
- 上传图片：将文件拖拽上传区域内，或单击上传图片模块进行上传。 上传图片支持jpg、jpeg、png、gif格式。单张图片大小不能超过5MB。
  图2上传图片   
  ![](https://support.huaweicloud.com/usermanual-astroflow/zh-cn_image_0000001934881012.png) 
- 填充方式：按需选择图片的展示方式，支持"等比例展示"、"宽度自适应"、"高度自适应"和"拉伸填满"四种方式。
  图3设置填充方式   
  ![](https://support.huaweicloud.com/usermanual-astroflow/zh-cn_image_0000001934881404.png) 
 
#### 样式配置
- 内间距：设置容器内组件与容器四边的间距，可分别配置上、下、左、右或四周。默认值为0px，范围为0\~100px。 ![](https://support.huaweicloud.com/usermanual-astroflow/zh-cn_image_0000002000386344.png)
  
- 外间距：设置容器外与其他容器四边的间距，可分别配置上、下、左、右或四周。默认值为0px，范围为0\~100px。
- 边框：
  - 位置：设置边框的位置，支持配置上、下、左、右和四周。
  
  - 宽度：设置边框的宽度。默认值为0px，范围为0\~50px。
  
  - 样式：设置边框样式，根据需求选择"无"、"圆点"、"虚线"和"实线"。
  
  - 颜色：设置边框显示的颜色。
  
  
  ![](https://support.huaweicloud.com/usermanual-astroflow/zh-cn_image_0000001938364366.png)
  
- 圆角：给元素添加圆角效果，设置圆角的大小和位置。 默认值为0px，范围为0\~500px。
  ![](https://support.huaweicloud.com/usermanual-astroflow/zh-cn_image_0000001965403381.png)
  
- 背景：设置组件样式的背景颜色。
- 阴影：
  - X：X偏移，阴影相对于其源元素在水平方向（X轴）的偏移距离，取值范围\[-100, 100\]。
  
  - Y：Y偏移，阴影在垂直方向（Y轴）的偏移距离，取值范围\[-100, 100\]。
  
  - 模糊：阴影的模糊程度。值为0时表示阴影边缘锐利，没有模糊。值越大，阴影的边缘就越模糊，从而产生更柔和的阴影效果。取值范围\[0, 100\]。
  
  - 扩散：扩散半径，它允许阴影在原始尺寸基础上向外扩散。正值会使阴影扩大，负值则会减小阴影的尺寸。取值范围\[-100, 100\]。
  
  - 颜色：设置阴影的颜色。
  
  
  ![](https://support.huaweicloud.com/usermanual-astroflow/zh-cn_image_0000001938205010.png)