---
title: "向您的编辑器添加图像节点"
description: "向您的 Tiptap 编辑器添加图像节点 UI 组件。了解更多请查看我们的文档！"
canonical_url: "https://tiptap.zhcndoc.com/ui-components/node-components/image-node"
---

# 向您的编辑器添加图像节点

向您的 Tiptap 编辑器添加图像节点 UI 组件。了解更多请查看我们的文档！

Tiptap 编辑器中图像节点的样式。

> **Interactive demo:** [image node](https://template.tiptap.dev/preview/tiptap-node/image-node)

## 安装

您可以通过 Tiptap CLI（适用于 Vite 或 Next.js）添加节点组件。

```bash
npx @tiptap/cli@latest add image-node
```

### 手动集成

对于除 Vite 或 Next.js 以外的框架，请从 [开源代码库](https://github.com/ueberdosis/tiptap-ui-components/tree/main/apps/web/src/components/tiptap-node/image-node) 手动添加节点组件。

### 导入样式

该组件要求您导入我们的样式，这些样式已添加到 `styles/keyframe-animation.scss` 和 `styles/_variables.scss`。

## 使用方法

ImageNode 提供了编辑器中图像的样式。要使用它，您需要将其包含在您的项目中，并确保您正在使用 Tiptap 的图像扩展。

```tsx
import { useEditor, EditorContent } from '@tiptap/react'
import { Image } from '@tiptap/extension-image'
import { StarterKit } from '@tiptap/starter-kit'

import '@/components/tiptap-node/image-node/image-node.scss'

export default function EditorWithImages() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit, Image],
    content: '<img src="/images/placeholder-image.png" alt="示例图像" />',
  })

  return <EditorContent editor={editor} />
}
```

## 特性

- 适当的图像尺寸（最大宽度：100%）
- 一致的边距和间距
- 高亮选择状态以改善用户体验
- 美观的边角半径
- 与线程系统兼容

## 要求

开源功能

- [`@tiptap/extension-image`](https://tiptap.zhcndoc.com/editor/extensions/nodes/image.md)（建议使用以获得完整功能）