diff --git a/packages/global/common/file/image/type.d.ts b/packages/global/common/file/image/type.d.ts
index 9bb4d28cbca..6fe274794bf 100644
--- a/packages/global/common/file/image/type.d.ts
+++ b/packages/global/common/file/image/type.d.ts
@@ -9,6 +9,7 @@ export type MongoImageSchemaType = {
   type: `${MongoImageTypeEnum}`;
 
   metadata?: {
+    mime?: string; // image mime type.
     relatedId?: string; // This id is associated with a set of images
   };
 };
diff --git a/packages/service/common/file/image/controller.ts b/packages/service/common/file/image/controller.ts
index be1672907a3..80fd1cba2d4 100644
--- a/packages/service/common/file/image/controller.ts
+++ b/packages/service/common/file/image/controller.ts
@@ -8,6 +8,7 @@ export function getMongoImgUrl(id: string) {
 }
 
 export const maxImgSize = 1024 * 1024 * 12;
+const base64MimeRegex = /data:image\/([^\)]+);base64/;
 export async function uploadMongoImg({
   type,
   base64Img,
@@ -22,7 +23,8 @@ export async function uploadMongoImg({
     return Promise.reject('Image too large');
   }
 
-  const base64Data = base64Img.split(',')[1];
+  const [base64Mime, base64Data] = base64Img.split(',')
+  const mime = `image/${base64Mime.match(base64MimeRegex)?.[1] ?? 'jpeg'}`
   const binary = Buffer.from(base64Data, 'base64');
 
   const { _id } = await MongoImage.create({
@@ -30,7 +32,7 @@ export async function uploadMongoImg({
     teamId,
     binary,
     expiredTime,
-    metadata,
+    metadata: Object.assign({ mime }, metadata),
     shareId
   });
 
@@ -42,7 +44,7 @@ export async function readMongoImg({ id }: { id: string }) {
   if (!data) {
     return Promise.reject('Image not found');
   }
-  return data?.binary;
+  return data;
 }
 
 export async function delImgByRelatedId({
diff --git a/projects/app/src/pages/api/system/img/[id].ts b/projects/app/src/pages/api/system/img/[id].ts
index 203be15b240..cecce186698 100644
--- a/projects/app/src/pages/api/system/img/[id].ts
+++ b/projects/app/src/pages/api/system/img/[id].ts
@@ -10,9 +10,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     await connectToDatabase();
     const { id } = req.query as { id: string };
 
-    const binary = await readMongoImg({ id });
+    const { binary, metadata } = await readMongoImg({ id });
 
-    res.setHeader('Content-Type', guessBase64ImageType(binary.toString('base64')));
+    res.setHeader('Content-Type', metadata?.mime ?? guessBase64ImageType(binary.toString('base64')));
     res.send(binary);
   } catch (error) {
     jsonRes(res, {