diff --git a/web/src/components/image/index.tsx b/web/src/components/image/index.tsx
index d4a5d1ea1..e04558936 100644
--- a/web/src/components/image/index.tsx
+++ b/web/src/components/image/index.tsx
@@ -1,4 +1,4 @@
-import { webAPI } from '@/utils/api';
+import { restAPIv1 } from '@/utils/api';
 import classNames from 'classnames';
 import React from 'react';
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
@@ -13,7 +13,7 @@ const Image = ({ id, t, label, className, ...props }: IImage) => {
   const imageElement = (
     <img
       {...props}
-      src={`${webAPI}/document/image/${id}${t ? `?_t=${t}` : ''}`}
+      src={`${restAPIv1}/documents/images/${id}${t ? `?_t=${t}` : ''}`}
       className={classNames('max-w-[45vw] max-h-[40wh] block', className)}
     />
   );
diff --git a/web/src/components/next-message-item/reference-image-list.tsx b/web/src/components/next-message-item/reference-image-list.tsx
index 41096ae60..41d0c5603 100644
--- a/web/src/components/next-message-item/reference-image-list.tsx
+++ b/web/src/components/next-message-item/reference-image-list.tsx
@@ -7,7 +7,7 @@ import {
   CarouselPrevious,
 } from '@/components/ui/carousel';
 import { IReferenceChunk } from '@/interfaces/database/chat';
-import { webAPI } from '@/utils/api';
+import { restAPIv1 } from '@/utils/api';
 import { isPlainObject } from 'lodash';
 import { RotateCw, ZoomIn, ZoomOut } from 'lucide-react';
 import { useMemo } from 'react';
@@ -79,7 +79,7 @@ function ImageCarousel({ images }: { images: ImageItem[] }) {
               @2xl:basis-1/6
               "
             >
-              <PhotoView src={`${webAPI}/document/image/${id}`}>
+              <PhotoView src={`${restAPIv1}/documents/images/${id}`}>
                 <Image
                   id={id}
                   className="h-40 w-full"