diff --git a/src/ImageEditor/images-previewer/image-preview/index.js b/src/ImageEditor/images-previewer/image-preview/index.js
index 7db6d575..bcada557 100644
--- a/src/ImageEditor/images-previewer/image-preview/index.js
+++ b/src/ImageEditor/images-previewer/image-preview/index.js
@@ -1,8 +1,9 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { getImageThumbnailUrl } from 'dtable-utils';
 import DTableToolTip from '../../../DTableToolTip';
 import DeleteTip from '../../../DeleteTip';
-import { getImageThumbnailUrl, checkImgExists, checkSVGImage, getFileName } from '../../../utils/url';
+import { checkImgExists, checkSVGImage, getFileName } from '../../../utils/url';
 import { FILE_EDITOR_STATUS, isMobile } from '../../../constants';
 import { getLocale } from '../../../lang';
 
diff --git a/src/ImageEditor/pc-editor/addition-previewer/local-image-addition/index.js b/src/ImageEditor/pc-editor/addition-previewer/local-image-addition/index.js
index 92f0a122..1ce02a35 100644
--- a/src/ImageEditor/pc-editor/addition-previewer/local-image-addition/index.js
+++ b/src/ImageEditor/pc-editor/addition-previewer/local-image-addition/index.js
@@ -1,8 +1,8 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Input } from 'reactstrap';
+import { getImageThumbnailUrl } from 'dtable-utils';
 import Progress from '../../../../UploadProgress';
-import { getImageThumbnailUrl } from '../../../../utils/url';
 import FileUploader from '../../../../FileUploader';
 import { getLocale } from '../../../../lang';
 
diff --git a/src/ImageFormatter/images-lazy-load.js b/src/ImageFormatter/images-lazy-load.js
index 0c384518..3d7d9448 100644
--- a/src/ImageFormatter/images-lazy-load.js
+++ b/src/ImageFormatter/images-lazy-load.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { getImageThumbnailUrl } from 'dtable-utils';
 import Loading from '../Loading';
-import { getImageThumbnailUrl } from '../utils/url';
 
 const ImagesLazyLoad = ({ images, server, onImageClick, renderItem, dtableUuid }) => {
   const [currentImages, setCurrentImages] = useState(images);
diff --git a/src/ImageFormatter/index.js b/src/ImageFormatter/index.js
index 3d6f1bfc..58a1614e 100644
--- a/src/ImageFormatter/index.js
+++ b/src/ImageFormatter/index.js
@@ -1,9 +1,9 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { getImageThumbnailUrl } from 'dtable-utils';
 import ImagesLazyLoad from './images-lazy-load';
 import ImagePreviewerLightbox from '../ImagePreviewerLightbox';
-import { getImageThumbnailUrl } from '../utils/url';
 
 import './index.css';
 
@@ -78,7 +78,7 @@ class ImageFormatter extends React.Component {
 
     if (isSample) {
       let item = value[0];
-      let url = getImageThumbnailUrl(item, server);
+      let url = getImageThumbnailUrl(item, { server, dtableUuid });
       return (
         <div className={className}>
           <img className="image-item" src={url} alt=""/>
diff --git a/src/ImagePreviewerLightbox/index.js b/src/ImagePreviewerLightbox/index.js
index 4e890255..6998a152 100644
--- a/src/ImagePreviewerLightbox/index.js
+++ b/src/ImagePreviewerLightbox/index.js
@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Lightbox from '@seafile/react-image-lightbox';
-import { getFileSuffix, generateCurrentBaseImageUrl, getImageThumbnailUrl, isCustomAssetUrl, isDigitalSignsUrl, isInternalImg, needUseThumbnailImage } from '../utils/url';
+import { getImageThumbnailUrl } from 'dtable-utils';
+import { getFileSuffix, generateCurrentBaseImageUrl, isCustomAssetUrl, isDigitalSignsUrl, isInternalImg, needUseThumbnailImage } from '../utils/url';
 import { getLocale } from '../lang';
 
 import '@seafile/react-image-lightbox/style.css';
diff --git a/src/ImageThumbnail/index.js b/src/ImageThumbnail/index.js
index 2f9d69f8..6e6ee730 100644
--- a/src/ImageThumbnail/index.js
+++ b/src/ImageThumbnail/index.js
@@ -2,8 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import DTableToolTip from '../DTableToolTip';
 import classnames from 'classnames';
+import { getImageThumbnailUrl } from 'dtable-utils';
 import DeleteTip from '../DeleteTip';
-import { getImageThumbnailUrl, checkImgExists, checkSVGImage, getFileName } from '../utils/url';
+import { checkImgExists, checkSVGImage, getFileName } from '../utils/url';
 import { getLocale } from '../lang';
 import { isMobile } from '../constants';
 
diff --git a/src/utils/url.js b/src/utils/url.js
index 5d3d43f6..4a942add 100644
--- a/src/utils/url.js
+++ b/src/utils/url.js
@@ -1,3 +1,4 @@
+import { getImageThumbnailUrl } from 'dtable-utils';
 import { FILEEXT_ICON_MAP, FILEEXT_ICON_URL_MAP } from '../constants/file';
 
 export const isTargetUrl = (target, url) => {
@@ -78,27 +79,6 @@ export const generateCurrentBaseImageUrl = ({ server, workspaceID, dtableUuid, p
   return `${validServer}/workspace/${workspaceID}/asset/${dtableUuid}${partUrl}`;
 };
 
-export const getImageThumbnailUrl = (url, { server, dtableUuid, workspaceID, size = 256 } = {}) => {
-  if (!url || typeof url !== 'string') return '';
-
-  if (server && dtableUuid && isCustomAssetUrl(url)) {
-    const assetUuid = url.slice(url.lastIndexOf('/') + 1, url.lastIndexOf('.'));
-    return server + '/dtable/' + dtableUuid + '/custom-asset-thumbnail/' + assetUuid + '?size=' + size;
-  }
-
-  if (isAIUrl(url) || checkSVGImage(url) || !isInternalImg(url) || isBase64(url)) return url;
-
-  if (server && workspaceID && dtableUuid && isDigitalSignsUrl(url)) {
-    return generateCurrentBaseImageThumbnailUrl({
-      server, workspaceID, dtableUuid, size, partUrl: url,
-    });
-  }
-
-  if (url.includes('/thumbnail/workspace')) return url;
-
-  return url.replace('/workspace', '/thumbnail/workspace') + '?size=' + size;
-};
-
 export const getFileName = (url) => {
   if (!url) return null;
   let validUrl = url;