diff --git a/web/src/pages/document-viewer/image/index.tsx b/web/src/pages/document-viewer/image/index.tsx
new file mode 100644
index 000000000..2e574a78a
--- /dev/null
+++ b/web/src/pages/document-viewer/image/index.tsx
@@ -0,0 +1,43 @@
+import { Image as AntImage } from 'antd';
+import { useEffect, useState } from 'react';
+
+import { Authorization } from '@/constants/authorization';
+import { getAuthorization } from '@/utils/authorization-util';
+
+interface ImageProps {
+  src: string;
+  preview?: boolean;
+}
+
+const Image = ({ src, preview = false }: ImageProps) => {
+  const [imageSrc, setImageSrc] = useState<string>('');
+
+  useEffect(() => {
+    const loadImage = async () => {
+      try {
+        const response = await fetch(src, {
+          headers: {
+            [Authorization]: getAuthorization(),
+          },
+        });
+        const blob = await response.blob();
+        const objectUrl = URL.createObjectURL(blob);
+        setImageSrc(objectUrl);
+      } catch (error) {
+        console.error('Failed to load image:', error);
+      }
+    };
+
+    loadImage();
+
+    return () => {
+      if (imageSrc) {
+        URL.revokeObjectURL(imageSrc);
+      }
+    };
+  }, [src]);
+
+  return imageSrc ? <AntImage src={imageSrc} preview={preview} /> : null;
+};
+
+export default Image;
diff --git a/web/src/pages/document-viewer/index.tsx b/web/src/pages/document-viewer/index.tsx
index 688ee26ed..763c6ca3a 100644
--- a/web/src/pages/document-viewer/index.tsx
+++ b/web/src/pages/document-viewer/index.tsx
@@ -1,9 +1,10 @@
 import { Images } from '@/constants/common';
 import { api_host } from '@/utils/api';
-import { Flex, Image } from 'antd';
+import { Flex } from 'antd';
 import { useParams, useSearchParams } from 'umi';
 import Docx from './docx';
 import Excel from './excel';
+import Image from './image';
 import Pdf from './pdf';
 
 import { previewHtmlFile } from '@/utils/file-util';