diff --git a/packages/client/package.json b/packages/client/package.json
index 822b3e1a..bd84a914 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -78,6 +78,7 @@
"react-countdown": "^2.3.2",
"react-dom": "17.0.2",
"react-helmet": "^6.1.0",
+ "react-lazy-load-image-component": "^1.5.4",
"react-pdf": "^5.7.2",
"react-split-pane": "^0.1.92",
"scroll-into-view-if-needed": "^2.2.29",
diff --git a/packages/client/src/tiptap/wrappers/image/index.tsx b/packages/client/src/tiptap/wrappers/image/index.tsx
index 84a089fa..fb2ffcff 100644
--- a/packages/client/src/tiptap/wrappers/image/index.tsx
+++ b/packages/client/src/tiptap/wrappers/image/index.tsx
@@ -1,9 +1,9 @@
-import Image from 'next/image';
import cls from 'classnames';
import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { NodeViewWrapper, NodeViewContent } from '@tiptap/react';
-import { Resizeable } from 'components/resizeable';
import { Typography, Spin } from '@douyinfe/semi-ui';
+import { NodeViewWrapper, NodeViewContent } from '@tiptap/react';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+import { Resizeable } from 'components/resizeable';
import { useToggle } from 'hooks/use-toggle';
import { uploadFile } from 'services/file';
import { extractFileExtension, extractFilename, getImageWidthHeight } from '../../utils/file';
@@ -11,8 +11,6 @@ import styles from './index.module.scss';
const { Text } = Typography;
-const isNumber = (v) => typeof v === 'number';
-
export const ImageWrapper = ({ editor, node, updateAttributes }) => {
const isEditable = editor.isEditable;
const { hasTrigger, error, src, alt, title, width, height, textAlign } = node.attrs;
@@ -78,12 +76,7 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => {
);
}
- const img =
- isNumber(width) && isNumber(height) ? (
-
- ) : (
-
- );
+ const img = ;
if (isEditable) {
return (
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1ffa85eb..340c3018 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -106,6 +106,7 @@ importers:
react-countdown: ^2.3.2
react-dom: 17.0.2
react-helmet: ^6.1.0
+ react-lazy-load-image-component: ^1.5.4
react-pdf: ^5.7.2
react-split-pane: ^0.1.92
scroll-into-view-if-needed: ^2.2.29
@@ -187,6 +188,7 @@ importers:
react-countdown: 2.3.2_react-dom@17.0.2+react@17.0.2
react-dom: 17.0.2_react@17.0.2
react-helmet: 6.1.0_react@17.0.2
+ react-lazy-load-image-component: 1.5.4_react-dom@17.0.2+react@17.0.2
react-pdf: 5.7.2_react-dom@17.0.2+react@17.0.2
react-split-pane: 0.1.92_react-dom@17.0.2+react@17.0.2
scroll-into-view-if-needed: 2.2.29
@@ -5507,6 +5509,10 @@ packages:
p-locate: 4.1.0
dev: true
+ /lodash.debounce/4.0.8:
+ resolution: {integrity: sha1-gteb/zCmfEAF/9XiUVMArZyk168=}
+ dev: false
+
/lodash.defaults/4.2.0:
resolution: {integrity: sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw=}
dev: false
@@ -5547,6 +5553,10 @@ packages:
resolution: {integrity: sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=}
dev: false
+ /lodash.throttle/4.1.1:
+ resolution: {integrity: sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=}
+ dev: false
+
/lodash.truncate/4.4.2:
resolution: {integrity: sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=}
dev: true
@@ -6731,6 +6741,18 @@ packages:
resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
dev: true
+ /react-lazy-load-image-component/1.5.4_react-dom@17.0.2+react@17.0.2:
+ resolution: {integrity: sha512-PSi9tckzZmiqfYZwS6ke2RoRbICsN5m0qsG6fEjUdQNe5STiJieXLlRuGD3uAASOQPFiKYFSLoueN07nk0uffw==}
+ peerDependencies:
+ react: ^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x
+ react-dom: ^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x
+ dependencies:
+ lodash.debounce: 4.0.8
+ lodash.throttle: 4.1.1
+ react: 17.0.2
+ react-dom: 17.0.2_react@17.0.2
+ dev: false
+
/react-lifecycles-compat/3.0.4:
resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==}
dev: false