diff --git a/packages/client/src/tiptap/editor/collaboration/collaboration/editor.tsx b/packages/client/src/tiptap/editor/collaboration/collaboration/editor.tsx
index 82b07cf3..d077fcc7 100644
--- a/packages/client/src/tiptap/editor/collaboration/collaboration/editor.tsx
+++ b/packages/client/src/tiptap/editor/collaboration/collaboration/editor.tsx
@@ -3,6 +3,7 @@ import { HocuspocusProvider } from '@hocuspocus/provider';
 import cls from 'classnames';
 import { Banner } from 'components/banner';
 import { CommentEditor } from 'components/document/comments';
+import { ImageViewer } from 'components/image-viewer';
 import { LogoName } from 'components/logo';
 import { getRandomColor } from 'helpers/color';
 import { isAndroid, isIOS } from 'helpers/env';
@@ -197,6 +198,7 @@ export const EditorInstance = forwardRef((props: IProps, ref) => {
           <Tocs editor={editor} getContainer={getTocsContainer} />
         </div>
         {protals}
+        <ImageViewer container={$mainContainer.current} />
       </main>
       <BackTop
         target={() => $mainContainer.current}
diff --git a/packages/client/src/tiptap/editor/collaboration/reader.tsx b/packages/client/src/tiptap/editor/collaboration/reader.tsx
index a45185c1..eb80ca57 100644
--- a/packages/client/src/tiptap/editor/collaboration/reader.tsx
+++ b/packages/client/src/tiptap/editor/collaboration/reader.tsx
@@ -1,4 +1,5 @@
 import { BackTop } from '@douyinfe/semi-ui';
+import { ImageViewer } from 'components/image-viewer';
 import { isMobile } from 'helpers/env';
 import { safeJSONParse } from 'helpers/json';
 import React, { useCallback, useMemo, useRef } from 'react';
@@ -38,6 +39,7 @@ export const ReaderEditor: React.FC<IProps> = ({ content }) => {
         <div className={styles.tocsWrap}>
           <Tocs editor={editor} getContainer={getTocsContainer} />
         </div>
+        <ImageViewer container={$mainContainer.current} />
       </main>
       <BackTop
         target={() => $mainContainer.current}