From 9879280a2c121fcbf0abbe8df34b260996afddf9 Mon Sep 17 00:00:00 2001
From: ggqshr <ggq18663278150@sina.com>
Date: Mon, 13 Oct 2025 10:19:33 +0800
Subject: [PATCH] fix: fix markdown embed image issue (#857)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: fix markdown embed image issue

* fix urlTransform filter condition

* fix code format

* add image/gif filter

* Format code

---------

Co-authored-by: 饺子w (Yumechi) <35571479+eternal-flame-AD@users.noreply.github.com>
---
 ui/src/common/Markdown.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/ui/src/common/Markdown.tsx b/ui/src/common/Markdown.tsx
index 33ac661..aedcfe1 100644
--- a/ui/src/common/Markdown.tsx
+++ b/ui/src/common/Markdown.tsx
@@ -1,7 +1,21 @@
 import React from 'react';
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown, {defaultUrlTransform} from 'react-markdown';
+import type {UrlTransform} from 'react-markdown';
 import gfm from 'remark-gfm';
 
+// Copy from mlflow/server/js/src/shared/web-shared/genai-markdown-renderer/GenAIMarkdownRenderer.tsx
+// Related PR: https://github.com/mlflow/mlflow/pull/16761
+const urlTransform: UrlTransform = (value) => {
+    if (
+        value.startsWith('data:image/png;') ||
+        value.startsWith('data:image/jpeg;') ||
+        value.startsWith('data:image/gif;')
+    ) {
+        return value;
+    }
+    return defaultUrlTransform(value);
+};
+
 export const Markdown = ({
     children,
     onImageLoaded = () => {},
@@ -11,7 +25,8 @@ export const Markdown = ({
 }) => (
     <ReactMarkdown
         components={{img: ({...props}) => <img onLoad={onImageLoaded} {...props} />}}
-        remarkPlugins={[gfm]}>
+        remarkPlugins={[gfm]}
+        urlTransform={urlTransform}>
         {children}
     </ReactMarkdown>
 );