dify icon indicating copy to clipboard operation
dify copied to clipboard

Markdown SVG has rendering, but Markdown image/svg+xml; base64 is not rendered

Open junjiem opened this issue 8 months ago • 1 comments

Self Checks

  • [x] This is only for bug report, if you would like to ask a question, please head to Discussions.
  • [x] I have searched for existing issues search for existing issues, including closed ones.
  • [x] I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
  • [x] [FOR CHINESE USERS] 请务必使用英文提交 Issue,否则会被关闭。谢谢!:)
  • [x] Please do not modify this template :) and fill in all the required fields.

Dify version

1.2.0

Cloud or Self Hosted

Cloud, Self Hosted (Docker), Self Hosted (Source)

Steps to reproduce

Dify 1.2.0 Markdown SVG has rendering, but Markdown ![](data:image/svg+xml; base64,xxxxxxxxxxxxx) is not rendered.

Image

✔️ Expected Behavior

No response

❌ Actual Behavior

No response

junjiem avatar Apr 10 '25 07:04 junjiem

I found a similar open issue regarding the rendering of base64-encoded SVG images in Markdown. The suggested solution involves checking the Markdown rendering logic in the Dify codebase, specifically in the file web/app/components/base/markdown.tsx. It uses the CodeBlock component to handle SVG content. You might want to verify if the SVGRenderer component is functioning correctly or if there are issues with the ErrorBoundary that might be preventing the SVG from being displayed. Additionally, ensure that the SVG content is correctly formatted and that there are no issues with the base64 encoding process [1].

To continue talking to Dosu, mention @dosu.


Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other

dosubot[bot] avatar Apr 10 '25 07:04 dosubot[bot]

After Testing on version 1.4.0, I found this issue has been resolved—inline base64 SVGs render correctly there. Could you try upgrading to the latest version to see if it fixes the problem on your end?

Image
repeat below without anything else:
test demo\n\n![SVG Circle](data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDAiIHN0cm9rZT0iIzAwNzJmZiIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSIjZTZmNGZmIiAvPgogIDx0ZXh0IHg9IjUwIiB5PSI1NSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZmlsbD0iIzAwNzJmZiIgZm9udC1zaXplPSIxNCI+RGlmeTwvdGV4dD4KPC9zdmc+)

xuzijie1995 avatar Jun 05 '25 10:06 xuzijie1995