diff --git a/server/admin/src/client/components/field/imageUrl.tsx b/server/admin/src/client/components/field/imageUrl.tsx
new file mode 100644
index 00000000..2ce4427b
--- /dev/null
+++ b/server/admin/src/client/components/field/imageUrl.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { createFieldFactory, FieldDetailComponent, Image, Link } from 'tushan';
+
+export const ImageUrlFieldDetail: FieldDetailComponent = React.memo((props) => {
+  const url = props.value;
+  const isImage = ['.png', '.jpg', '.gif', '.jpeg', '.webp'].some((ext) =>
+    String(url).endsWith(ext)
+  );
+
+  if (isImage) {
+    return <Image src={url} height={100} />;
+  }
+
+  return (
+    <Link href={props.value} icon={true} target="_blank">
+      {props.value}
+    </Link>
+  );
+});
+ImageUrlFieldDetail.displayName = 'ImageUrlFieldDetail';
+
+export const createImageUrlField = createFieldFactory({
+  detail: ImageUrlFieldDetail,
+  edit: ImageUrlFieldDetail,
+});
diff --git a/server/admin/src/client/fields.ts b/server/admin/src/client/fields.ts
index 91b95289..99f8e18d 100644
--- a/server/admin/src/client/fields.ts
+++ b/server/admin/src/client/fields.ts
@@ -14,6 +14,7 @@ import {
 import { createFileSizeField } from './components/field/filesize';
 import { createUserField } from './components/field/user';
 import { parseUrlStr } from './utils';
+import { createImageUrlField } from './components/field/imageUrl';
 
 export const userFields = [
   createTextField('id', {
@@ -152,7 +153,7 @@ export const groupFields = [
 
 export const fileFields = [
   createTextField('objectName'),
-  createUrlField('url', {
+  createImageUrlField('url', {
     preRenderTransform: parseUrlStr,
   }),
   createFileSizeField('size', {