# 图片与组合

- Human documentation: [https://docs.univer.ai/zh-CN/guides/slides/features/core/images-and-groups](https://docs.univer.ai/zh-CN/guides/slides/features/core/images-and-groups)

- Agent Markdown: [https://docs.univer.ai/zh-CN/guides/slides/features/core/images-and-groups.md](https://docs.univer.ai/zh-CN/guides/slides/features/core/images-and-groups.md)

- Requested language: `zh-CN`

- Content language: `zh-CN`

- Documentation version: `1.0.0-rc.0`

- Source: [slides/features/core/images-and-groups.zh-CN.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/slides/features/core/images-and-groups.zh-CN.mdx)

---

图片是一级幻灯片元素。处理 URL 或 Blob 时使用异步辅助方法；已经明确全部图片属性时，可以使用构建器。

## 插入图片

```ts
const slide = univerAPI.getActivePresentation()?.getActiveSlide()

if (!slide) {
  throw new Error('No active slide')
}

const image = await slide.insertImageAsync(
  'https://example.com/assets/diagram.png',
  {
    imageSourceType: univerAPI.Enum.ImageSourceType.URL,
    left: 80,
    top: 120,
    width: 320,
    height: 180,
  }
)
```

`getImages()` 返回当前幻灯片中的图片。使用 `setSource()`、`setCrop()`、`setClipShape()` 或 `toBuilder()` 更新已有图片，使用 `removeImage()` 删除图片。

## 组合元素

```ts
const shape = slide.getShapes()[0]

if (shape) {
  const group = slide.group([shape, image])
  const children = group.getChildren()

  // 将子元素恢复到幻灯片中。
  slide.ungroup(group)
}
```

组合会保持子元素顺序，并提供与其他页面元素相同的变换、可见性、名称和描述方法。`getGroups()` 会列出幻灯片的顶层组合。