diff --git a/web/src/components/document-preview/index.tsx b/web/src/components/document-preview/index.tsx
index 37889833c8..dc764ce6f1 100644
--- a/web/src/components/document-preview/index.tsx
+++ b/web/src/components/document-preview/index.tsx
@@ -1,5 +1,6 @@
 import { memo } from 'react';
 
+import { Images } from '@/constants/common';
 import CSVFileViewer from './csv-preview';
 import { DocPreviewer } from './doc-preview';
 import { ExcelCsvPreviewer } from './excel-preview';
@@ -44,9 +45,7 @@ const DocumentPreview = function ({
           <TxtPreviewer className={className} url={url} />
         </section>
       )}
-      {['jpg', 'png', 'gif', 'jpeg', 'svg', 'bmp', 'ico', 'tif'].indexOf(
-        fileType,
-      ) > -1 && (
+      {Images.indexOf(fileType) > -1 && (
         <section>
           <ImagePreviewer className={className} url={url} />
         </section>
diff --git a/web/src/pages/dataflow-result/index.tsx b/web/src/pages/dataflow-result/index.tsx
index 26c265d83e..f3ed49cc03 100644
--- a/web/src/pages/dataflow-result/index.tsx
+++ b/web/src/pages/dataflow-result/index.tsx
@@ -63,7 +63,7 @@ const DataflowResult = () => {
   const fileType = useMemo(() => {
     if (isAgent) {
       return Images.some((x) => x === documentExtension)
-        ? documentInfo?.name.split('.').pop() || 'visual'
+        ? documentInfo?.name?.split('.').pop() || documentExtension
         : documentExtension;
     }
     switch (documentInfo?.type) {