---
title: "图片扩展"
description: "在 Tiptap 中使用图片扩展来渲染 `` HTML 标签，以将图片添加到您的文档中。欲了解更多，请查看我们的文档！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/nodes/image"
---

# 图片扩展

在 Tiptap 中使用图片扩展来渲染 `` HTML 标签，以将图片添加到您的文档中。欲了解更多，请查看我们的文档！

使用此扩展来渲染 `<img>` HTML 标签。默认情况下，这些图片是块级元素。如果您想将图像与文本内联渲染，请将 `inline` 选项设置为 `true`。

> **无服务器功能:**
>
> 此扩展仅负责显示图像。它不会将图像上传到您的服务器，
> 对此您可以集成 [FileHandler
> 扩展](https://tiptap.zhcndoc.com/editor/extensions/functionality/filehandler.md)

> **Interactive demo:** [Image](https://embed.tiptap.dev/preview/Nodes/Image)

## 安装

```bash
npm install @tiptap/extension-image
```

## 设置

### inline

将图像节点作为内联元素渲染，例如在段落标签中：`<p><img src="spacer.gif"></p>`。默认情况下，图像与段落处于同一层级。

这完全取决于您希望拥有的编辑体验，但如果您（例如）从 Quill 迁移到 Tiptap，这可能会很有用。

默认值：`false`

```js
Image.configure({
  inline: true,
})
```

### resize

支持可调整大小的图像选项。如果定义了该选项，节点将被包裹在一个 [可调整大小的节点视图](https://tiptap.zhcndoc.com/editor/api/resizable-nodeviews.md) 中，从而可以通过调整柄改变图像大小。

默认值：`undefined`

```js
Image.configure({
  resize: {
    enabled: true,
    directions: ['top', 'bottom', 'left', 'right'], // 可以是任意方向或对角线组合
    minWidth: 50,
    minHeight: 50,
    alwaysPreserveAspectRatio: true,
  }
})
```

### allowBase64

允许将图像解析为 base64 字符串 `<img src="data:image/jpg;base64...">`。

默认值：`false`

```js
Image.configure({
  allowBase64: true,
})
```

### HTMLAttributes

应添加到渲染的 HTML 标签中的自定义 HTML 属性。

```js
Image.configure({
  HTMLAttributes: {
    class: 'my-custom-class',
  },
})
```

## 命令

### setImage()

使当前节点成为一张图片。

```js
editor.commands.setImage({ src: 'https://example.com/foobar.png' })
editor.commands.setImage({
  src: 'https://example.com/foobar.png',
  alt: '一张无聊的示例图片',
  title: '示例',
})
```

## 示例

### 可调整大小的图片

> **Interactive demo:** [ResizableImages](https://embed.tiptap.dev/preview/Examples/ResizableImages)

## 源代码

[packages/extension-image/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-image/)