# FImage

> Language fallback: requested `zh-CN`; content is `en-US`.

- Human documentation: [https://docs.univer.ai/zh-CN/reference/facade/image](https://docs.univer.ai/zh-CN/reference/facade/image)

- Agent Markdown: [https://docs.univer.ai/zh-CN/reference/facade/image.md](https://docs.univer.ai/zh-CN/reference/facade/image.md)

- Requested language: `zh-CN`

- Content language: `en-US`

- Documentation version: `1.0.0-rc.0`

- Source: [facade/image.mdx](https://github.com/dream-num/documentation/blob/dev/content/reference/facade/image.mdx)

---

The facade class for a slide image element.

## Access

Access through:

* [`FSlide.insertImage()`](https://docs.univer.ai/zh-CN/reference/facade/slide.md#insertimage)
* [`FSlide.insertImageAsync()`](https://docs.univer.ai/zh-CN/reference/facade/slide.md#insertimageasync)
* [`FSlide.updateImage()`](https://docs.univer.ai/zh-CN/reference/facade/slide.md#updateimage)
* [`FSlide.getImages()`](https://docs.univer.ai/zh-CN/reference/facade/slide.md#getimages)

## Inheritance

Extends [`FPageElement`](https://docs.univer.ai/zh-CN/reference/facade/page-element.md). Its inherited members are available on this object.

## Setup

Register [`@univerjs-pro/slides`](https://docs.univer.ai/zh-CN/reference/packages/plugins/univerjs-pro/slides.md) or a preset that includes it. In plugin mode, import `@univerjs-pro/slides/facade`. Additional methods below require their listed plugin packages. See [Facade setup](https://docs.univer.ai/zh-CN/guides/slides/getting-started/facade.md).

## `@univerjs-pro/slides`

### `FImage.getSource`

Get the image source.

```typescript
getSource(): string
```

**Returns**

The image source.

**Examples**

```ts
const fPresentation = univerAPI.getActivePresentation()
const fSlide = fPresentation.getSlideByIndex(0)
const images = fSlide.getImages()
console.log(images[0]?.getSource())
```

**Package:** [`@univerjs-pro/slides`](https://docs.univer.ai/zh-CN/reference/packages/plugins/univerjs-pro/slides.md) · [Type definitions](https://unpkg.com/@univerjs-pro/slides@1.0.0-rc.0/lib/types/facade/f-image.d.ts)

### `FImage.setClipShape`

Set the preset shape used to clip the image.

```typescript
setClipShape(prstGeom: ShapeTypeEnum, adjustValues?: Record<string, number>): this
```

**Parameters**

* `prstGeom` — Required. The preset shape type.
* `adjustValues` — Optional. Optional adjust values for the clip shape.

**Returns**

This image, for chaining.

**Examples**

```ts
const fPresentation = univerAPI.getActivePresentation()
const fSlide = fPresentation.getSlideByIndex(0)

const image = fSlide.getImages()[0]
if (image) {
  image.setClipShape(univerAPI.Enum.ShapeTypeEnum.RoundRect, { adj1: 5000 })
}
```

**Types:** [`ShapeTypeEnum`](https://unpkg.com/@univerjs-pro/slides@1.0.0-rc.0/lib/types/facade/f-image.d.ts) · [`Record`](https://unpkg.com/@typescript/typescript-darwin-arm64@7.0.2/lib/lib.es5.d.ts)

**Package:** [`@univerjs-pro/slides`](https://docs.univer.ai/zh-CN/reference/packages/plugins/univerjs-pro/slides.md) · [Type definitions](https://unpkg.com/@univerjs-pro/slides@1.0.0-rc.0/lib/types/facade/f-image.d.ts)

### `FImage.setCrop`

Set the crop rectangle of the image.

```typescript
setCrop(crop: ISlideImageElement['crop']): this
```

**Parameters**

* `crop` — Required. The crop rectangle.

**Returns**

This image, for chaining.

**Examples**

```ts
const fPresentation = univerAPI.getActivePresentation()
const fSlide = fPresentation.getSlideByIndex(0)

const image = fSlide.getImages()[0]
if (image) {
  image.setCrop({
    left: 10,
    top: 10,
    right: 10,
    bottom: 10,
  })
}
```

**Types:** [`ISlideImageElement`](https://unpkg.com/@univerjs-pro/slides@1.0.0-rc.0/lib/types/slide.type.d.ts)

**Package:** [`@univerjs-pro/slides`](https://docs.univer.ai/zh-CN/reference/packages/plugins/univerjs-pro/slides.md) · [Type definitions](https://unpkg.com/@univerjs-pro/slides@1.0.0-rc.0/lib/types/facade/f-image.d.ts)

### `FImage.setShapeData`

Set shape-style data for the image frame, such as picture border.

```typescript
setShapeData(shapeData: ISlideImageElement['shapeData']): this
```

**Parameters**

* `shapeData` — Required. Shape-style data reused from the shape model.

**Returns**

This image, for chaining.

**Examples**

```ts
const fPresentation = univerAPI.getActivePresentation()
const fSlide = fPresentation.getSlideByIndex(0)

const image = fSlide.getImages()[0]
if (image) {
  image.setShapeData({
    stroke: {
      color: '#FF0000',
      width: 2,
      lineStrokeType: univerAPI.Enum.ShapeLineTypeEnum.SolidLine,
    },
  })
}
```

**Types:** [`ISlideImageElement`](https://unpkg.com/@univerjs-pro/slides@1.0.0-rc.0/lib/types/slide.type.d.ts)

**Package:** [`@univerjs-pro/slides`](https://docs.univer.ai/zh-CN/reference/packages/plugins/univerjs-pro/slides.md) · [Type definitions](https://unpkg.com/@univerjs-pro/slides@1.0.0-rc.0/lib/types/facade/f-image.d.ts)

### `FImage.setSource`

Update the image source.

```typescript
setSource(source: string, imageSourceType?: ImageSourceType): this
```

**Parameters**

* `source` — Required. The image URL, base64 data URI, or image id.
* `imageSourceType` — Optional. The image source type.

**Returns**

This image, for chaining.

**Examples**

```ts
const fPresentation = univerAPI.getActivePresentation()
const fSlide = fPresentation.getSlideByIndex(0)

const image = fSlide.getImages()[0]
if (image) {
  image.setSource('https://example.com/image.png', univerAPI.Enum.ImageSourceType.URL)
}
```

**Types:** [`ImageSourceType`](https://unpkg.com/@univerjs/core@1.0.0-rc.0/lib/types/services/image-io/image-io.service.d.ts)

**Package:** [`@univerjs-pro/slides`](https://docs.univer.ai/zh-CN/reference/packages/plugins/univerjs-pro/slides.md) · [Type definitions](https://unpkg.com/@univerjs-pro/slides@1.0.0-rc.0/lib/types/facade/f-image.d.ts)

### `FImage.toBuilder`

Returns a builder initialized from this image. The builder does not update the slide until it is passed to `fSlide.updateImage()`.

```typescript
toBuilder(): FImageBuilder
```

**Returns**

An image builder.

**Examples**

```ts
const fPresentation = univerAPI.getActivePresentation()
const fSlide = fPresentation.getSlideByIndex(0)

const image = fSlide.getImages()[0]
if (image) {
  const imageInfo = image.toBuilder().setSize(480, 300).build()
  fSlide.updateImage(imageInfo)
}
```

**Types:** [`FImageBuilder`](https://docs.univer.ai/zh-CN/reference/facade/image-builder.md)

**Package:** [`@univerjs-pro/slides`](https://docs.univer.ai/zh-CN/reference/packages/plugins/univerjs-pro/slides.md) · [Type definitions](https://unpkg.com/@univerjs-pro/slides@1.0.0-rc.0/lib/types/facade/f-image.d.ts)