diff --git a/web/src/pages/chat/markdown-content/index.less b/web/src/pages/chat/markdown-content/index.less
index 5d6c4765c..eefca7c93 100644
--- a/web/src/pages/chat/markdown-content/index.less
+++ b/web/src/pages/chat/markdown-content/index.less
@@ -17,8 +17,10 @@
 }
 
 .referenceChunkImage {
-  width: 10vw;
+  display: block;
   object-fit: contain;
+  max-width: 100%;
+  max-height: 15vh;
 }
 
 .referenceImagePreview {
diff --git a/web/src/pages/chat/markdown-content/index.tsx b/web/src/pages/chat/markdown-content/index.tsx
index d1c6c6af6..3526f8077 100644
--- a/web/src/pages/chat/markdown-content/index.tsx
+++ b/web/src/pages/chat/markdown-content/index.tsx
@@ -108,6 +108,11 @@ const MarkdownContent = ({
       const fileThumbnail = documentId ? fileThumbnails[documentId] : '';
       const fileExtension = documentId ? getExtension(document?.doc_name) : '';
       const imageId = chunkItem?.image_id;
+
+      return (
+        <Image id={imageId} className={styles.referenceChunkImage}></Image>
+      );
+
       return (
         <div key={chunkItem?.id} className="flex gap-2">
           {imageId && (
@@ -172,6 +177,7 @@ const MarkdownContent = ({
     (text: string) => {
       let replacedText = reactStringReplace(text, reg, (match, i) => {
         const chunkIndex = getChunkIndex(match);
+        return getPopoverContent(chunkIndex);
         return (
           <Popover content={getPopoverContent(chunkIndex)} key={i}>
             <InfoCircleOutlined className={styles.referenceIcon} />