diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index fb11417a2c8..6480a1ce617 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,7 +19,7 @@
         "@seafile/sdoc-editor": "1.0.133",
         "@seafile/seafile-calendar": "0.0.28",
         "@seafile/seafile-editor": "^1.0.122",
-        "@seafile/sf-metadata-ui-component": "^0.0.51",
+        "@seafile/sf-metadata-ui-component": "^0.0.53",
         "@uiw/codemirror-extensions-langs": "^4.19.4",
         "@uiw/codemirror-themes": "^4.23.5",
         "@uiw/react-codemirror": "^4.19.4",
@@ -52,7 +52,7 @@
         "react-select": "5.7.0",
         "react-transition-group": "4.4.5",
         "reactstrap": "8.9.0",
-        "seafile-js": "^0.2.237",
+        "seafile-js": "0.2.237",
         "socket.io-client": "^2.2.0",
         "svg-sprite-loader": "^6.0.11",
         "svgo-loader": "^3.0.1",
@@ -5038,9 +5038,9 @@
       }
     },
     "node_modules/@seafile/sf-metadata-ui-component": {
-      "version": "0.0.51",
-      "resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-0.0.51.tgz",
-      "integrity": "sha512-eAoYcMahS+DdHlWM7h3rEq5aX99CK0BC3geqV4Wo5jEhN0LrbuAFxe4gaVqCb/OG7l/sHYEwDyUj8LWez2ZoMQ==",
+      "version": "0.0.53",
+      "resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-0.0.53.tgz",
+      "integrity": "sha512-RzogKUvy0RkziPMkdjizPOfrMFFtkaZUaqvZT3RYggrZsPcJ68rbak2tI+4kIH7MUOQB4s43y5ygku0oxK7OEg==",
       "dependencies": {
         "@seafile/seafile-calendar": "0.0.28",
         "@seafile/seafile-editor": "^1.0.122",
diff --git a/frontend/package.json b/frontend/package.json
index cdec3af1281..90fabb3f073 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,7 +14,7 @@
     "@seafile/sdoc-editor": "1.0.133",
     "@seafile/seafile-calendar": "0.0.28",
     "@seafile/seafile-editor": "^1.0.122",
-    "@seafile/sf-metadata-ui-component": "^0.0.51",
+    "@seafile/sf-metadata-ui-component": "^0.0.53",
     "@uiw/codemirror-extensions-langs": "^4.19.4",
     "@uiw/codemirror-themes": "^4.23.5",
     "@uiw/react-codemirror": "^4.19.4",
diff --git a/frontend/src/metadata/components/cell-formatter/file-name.js b/frontend/src/metadata/components/cell-formatter/file-name.js
new file mode 100644
index 00000000000..06cdb87bd1c
--- /dev/null
+++ b/frontend/src/metadata/components/cell-formatter/file-name.js
@@ -0,0 +1,43 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { FileNameFormatter } from '@seafile/sf-metadata-ui-component';
+import { Utils } from '../../../utils/utils';
+import { siteRoot, thumbnailDefaultSize } from '../../../utils/constants';
+import { getParentDirFromRecord } from '../../utils/cell';
+import { checkIsDir } from '../../utils/row';
+
+const FileName = ({ record, className: propsClassName, value, ...params }) => {
+  const parentDir = useMemo(() => getParentDirFromRecord(record), [record]);
+  const isDir = useMemo(() => checkIsDir(record), [record]);
+  const className = useMemo(() => {
+    if (!Utils.imageCheck(value)) return propsClassName;
+    return classnames(propsClassName, 'sf-metadata-image-file-formatter');
+  }, [propsClassName, value]);
+
+  const iconUrl = useMemo(() => {
+    if (isDir) {
+      const icon = Utils.getFolderIconUrl();
+      return { iconUrl: icon, defaultIconUrl: icon };
+    }
+    const defaultIconUrl = Utils.getFileIconUrl(value);
+    if (Utils.imageCheck(value)) {
+      const path = Utils.encodePath(Utils.joinPath(parentDir, value));
+      const repoID = window.sfMetadataStore.repoId;
+      const thumbnail = `${siteRoot}thumbnail/${repoID}/${thumbnailDefaultSize}${path}`;
+      return { iconUrl: thumbnail, defaultIconUrl };
+    }
+    return { iconUrl: defaultIconUrl, defaultIconUrl };
+  }, [isDir, value, parentDir]);
+
+  return (<FileNameFormatter { ...params } className={className} value={value} { ...iconUrl } />);
+
+};
+
+FileName.propTypes = {
+  value: PropTypes.string,
+  record: PropTypes.object.isRequired,
+  className: PropTypes.string,
+};
+
+export default FileName;
diff --git a/frontend/src/metadata/components/cell-formatter/index.js b/frontend/src/metadata/components/cell-formatter/index.js
index 5c4ced7b966..d702acce66c 100644
--- a/frontend/src/metadata/components/cell-formatter/index.js
+++ b/frontend/src/metadata/components/cell-formatter/index.js
@@ -2,9 +2,10 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Formatter } from '@seafile/sf-metadata-ui-component';
 import { useCollaborators } from '../../hooks';
-import { Utils } from '../../../utils/utils';
+import { CellType } from '../../constants';
+import FileName from './file-name';
 
-const CellFormatter = ({ readonly, value, field, ...params }) => {
+const CellFormatter = ({ readonly, value, field, record, ...params }) => {
   const { collaborators, collaboratorsCache, updateCollaboratorsCache, queryUser } = useCollaborators();
   const props = useMemo(() => {
     return {
@@ -15,11 +16,13 @@ const CellFormatter = ({ readonly, value, field, ...params }) => {
       value,
       field,
       queryUserAPI: queryUser,
-      getFileIconUrl: Utils.getFileIconUrl,
-      getFolderIconUrl: Utils.getFolderIconUrl,
     };
   }, [readonly, value, field, collaborators, collaboratorsCache, updateCollaboratorsCache, queryUser]);
 
+  if (field.type === CellType.FILE_NAME) {
+    return (<FileName { ...props } { ...params } record={record} />);
+  }
+
   return (
     <Formatter { ...props } { ...params } />
   );
@@ -29,6 +32,7 @@ CellFormatter.propTypes = {
   readonly: PropTypes.bool,
   value: PropTypes.any,
   field: PropTypes.object.isRequired,
+  record: PropTypes.object,
 };
 
 export default CellFormatter;
diff --git a/frontend/src/metadata/metadata-view/index.css b/frontend/src/metadata/metadata-view/index.css
index 74686ab5915..86b561f9c8d 100644
--- a/frontend/src/metadata/metadata-view/index.css
+++ b/frontend/src/metadata/metadata-view/index.css
@@ -4,3 +4,10 @@
   margin-bottom: 14px;
   background-color: #eee;
 }
+
+.sf-metadata-ui.file-name-formatter.sf-metadata-image-file-formatter .sf-metadata-file-icon {
+  transform: translateY(0);
+  max-width: 24px;
+  max-height: 24px;
+  height: unset;
+}
diff --git a/frontend/src/metadata/views/kanban/boards/board/card/index.css b/frontend/src/metadata/views/kanban/boards/board/card/index.css
index fa5af8bcdd2..26a73d7d88d 100644
--- a/frontend/src/metadata/views/kanban/boards/board/card/index.css
+++ b/frontend/src/metadata/views/kanban/boards/board/card/index.css
@@ -67,11 +67,11 @@
   white-space: nowrap;
 }
 
-.sf-metadata-kanban-card .file-name-formatter {
+.sf-metadata-kanban-card .file-name-formatter:not(.sf-metadata-image-file-formatter) {
   margin-left: -4px;
 }
 
-.sf-metadata-kanban-card .sf-metadata-special-file-name-formatter {
+.sf-metadata-kanban-card .sf-metadata-special-file-name-formatter:not(.sf-metadata-image-file-formatter) {
   margin-left: -2px;
 }
 
diff --git a/frontend/src/metadata/views/kanban/boards/board/card/index.js b/frontend/src/metadata/views/kanban/boards/board/card/index.js
index cc80e26be8e..01572ceb855 100644
--- a/frontend/src/metadata/views/kanban/boards/board/card/index.js
+++ b/frontend/src/metadata/views/kanban/boards/board/card/index.js
@@ -21,7 +21,7 @@ const Card = ({
     <article data-id={record._id} className={classnames('sf-metadata-kanban-card', { 'readonly': readonly })}>
       {titleColumn && (
         <div className="sf-metadata-kanban-card-header">
-          <Formatter value={titleValue} column={titleColumn}/>
+          <Formatter value={titleValue} column={titleColumn} record={record}/>
         </div>
       )}
       <div className="sf-metadata-kanban-card-body">
@@ -41,7 +41,7 @@ const Card = ({
           return (
             <div className="sf-metadata-kanban-card-record" key={column.key}>
               {displayColumnName && (<div className="sf-metadata-kanban-card-record-name">{column.name}</div>)}
-              <Formatter value={value} column={column}/>
+              <Formatter value={value} column={column} record={record}/>
             </div>
           );
         })}
diff --git a/frontend/src/metadata/views/kanban/boards/board/formatter.js b/frontend/src/metadata/views/kanban/boards/board/formatter.js
index 856f39cabbd..75932d34ef4 100644
--- a/frontend/src/metadata/views/kanban/boards/board/formatter.js
+++ b/frontend/src/metadata/views/kanban/boards/board/formatter.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import CellFormatter from '../../../../components/cell-formatter';
 import { CellType } from '../../../../constants';
 import { Utils } from '../../../../../utils/utils';
@@ -13,7 +14,7 @@ const SPECIAL_FILE_ICON = [
   'word.png',
 ];
 
-const Formatter = ({ value, column }) => {
+const Formatter = ({ value, column, record }) => {
   let className = '';
 
   if (column.type === CellType.FILE_NAME && value) {
@@ -23,7 +24,13 @@ const Formatter = ({ value, column }) => {
     }
   }
 
-  return (<CellFormatter className={className} value={value} field={column}/>);
+  return (<CellFormatter readonly={true} className={className} value={value} field={column} record={record} />);
+};
+
+Formatter.propTypes = {
+  value: PropTypes.any,
+  column: PropTypes.object,
+  record: PropTypes.object,
 };
 
 export default Formatter;
diff --git a/frontend/src/metadata/views/kanban/boards/board/header/index.js b/frontend/src/metadata/views/kanban/boards/board/header/index.js
index e93443d097a..4b31f13a63c 100644
--- a/frontend/src/metadata/views/kanban/boards/board/header/index.js
+++ b/frontend/src/metadata/views/kanban/boards/board/header/index.js
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import CellFormatter from '../../../../../components/cell-formatter';
 import { gettext } from '../../../../../../utils/constants';
 import OpMenu from './op-menu';
+import { CellType } from '../../../../../constants';
 
 import './index.css';
-import { CellType } from '../../../../../constants';
 
 const Header = ({ readonly, haveFreezed, value, groupByColumn, onDelete, onFreezed, onUnFreezed }) => {
   const [active, setActive] = useState(false);
diff --git a/frontend/src/metadata/views/table/table-main/records/record/cell/formatter.js b/frontend/src/metadata/views/table/table-main/records/record/cell/formatter.js
index e0e0cac281d..68dc9e536ab 100644
--- a/frontend/src/metadata/views/table/table-main/records/record/cell/formatter.js
+++ b/frontend/src/metadata/views/table/table-main/records/record/cell/formatter.js
@@ -15,7 +15,7 @@ const Formatter = ({ isCellSelected, isDir, field, value, onChange, record }) =>
   if (type === CellType.RATE && cellEditAble) {
     return (<RateEditor isCellSelected={isCellSelected} value={value} field={field} onChange={onChange} />);
   }
-  return (<CellFormatter readonly={true} value={value} field={field} isDir={isDir} />);
+  return (<CellFormatter readonly={true} value={value} field={field} record={record} />);
 };
 
 Formatter.propTypes = {