> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 图片

> 本文介绍了图片组件的功能、使用场景及详细操作步骤，包括选择图片组件、属性配置（如图片链接、直接上传、摆放方式等）以及如何配置图片样式。

## 1. 简介

### 1.1 功能简介

可以用于展示图片信息

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/jpeg/1625964989401-9a31a471-befa-495c-8128-90058e44d85b.jpeg)
</Frame>

亮点：可以自行控制组件的大小，但无法移动图片组件的位置（靠左、居中、靠右）

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639987048060-aced159e-e01c-425e-8493-dcdca5461d8b.png)
</Frame>

### 1.2 使用场景

展示仓库产品数据时需要用配上各产品图片详情。

## 2. 操作步骤

### 2.1 选择图片组件

基础 >> 图片 >> 选中后展示在编辑器中，如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639989786635-001cdd63-d2ad-4e89-a7f9-897e737625af.png)
</Frame>

报表页面编辑

### 2.2 属性配置

* 图片链接 ：复制图片链接并填入，图片会自动展示在该页面上
* 直接上传 ：直接将图片拖拽到虚线框内，支持 jpgjpegpnggifmp 格式文件，图片小于 10M

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639989826805-37997360-d818-434a-bc4e-160f418d9e1a.png)
</Frame>

上传图片方式

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639990186573-44ea32f2-ed7c-4fa8-976a-9f4e541c64a5.png)
</Frame>

放入图片链接

* 摆放方式： 铺满、适合、拉伸

* 圆型： 图片四个角的弧度，有大、中、小、无、自定义

* 圆角大小： 配合着圆型的自定义设置来，若圆型选择自定义，即可设置圆角大小

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639990239455-8962c80c-9c1d-43fa-99e0-bb0bc38f51fd.png)
</Frame>

* title： 图片的基础属性，不做展示
* 替代文本： 当图片地址不存在时的保存文本，如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639990302984-111161ee-a30e-4195-9add-e67da67a80bf.png)
</Frame>

替代文本

* 高级： 唯一标识

### 2.3 配置图片样式

支持调整图片的状态、高、宽、文字、背景等等，如图：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639990325159-7872a093-9eef-4282-9119-ce21f6df808f.png)
</Frame>