Image Display Issues in Chatbot Responses After Updating to Version 0.9.1

[Howardhn]

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

0.9.1

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

After updating Dify from version 0.5.x to 0.9.1, we've encountered the following issues with image display in chatbot responses:

1. Images are not displaying properly in chatbot responses.
2. When using Markdown syntax for images with embedded links, clicking on the image redirects to the specified link, but the image itself is not visible. Markdown Format：[](link url)
3. Images without embedded links display correctly.Markdown Format： Their resolution appears to be significantly lower compared to the previous version (0.5.x).
4. These issues were not present in the older version (0.5.x), where all image functionalities worked as expected. The issue can be demonstrated in the following images：

✔️ Expected Behavior

The following images is OK in the older version (0.5.x)：

❌ Actual Behavior

No response

[dosubot[bot]]

Hello @Howardhn! I'm here to assist you with any bugs, questions, or contributions you have for Dify. Let's work together to resolve your issue!

I found a similar discussion regarding image display issues in Dify. You might find it helpful to check out the thread titled "how to show image in Direct Reply node" which is still open and was last updated on September 30, 2024 ^[1].

For your specific issue, ensure that your configuration settings in api/core/file/upload_file_parser.py are correct. This file handles image extensions, URL signing, and image format settings, which might affect how images are displayed in chatbot responses ^[2].

To continue talking to Dosu, mention @dosu.

[crazywoola]

Might happens in this version as well https://github.com/langgenius/dify/issues/9079

[ClementeGao]

@crazywoola hi，same issue, The image disappears immediately after it appears. can you help me? error log :Tool response dicts require a 'name' key indicating the name of the called function

@douxc

[Howardhn]

The image shows a split-screen view of a web development environment. On the left side, there's a template editor with input variables and a code section. The code section contains two cases: Case1 and Case2, both referencing an image URL. The center of the image displays a preview with a light blue rectangle labeled "Remove Shadow" and "Case2" text below it. On the right side, there's a code inspector showing HTML and CSS details. Case1 successfully displays an image, while Case2 does not show the image and only displays text.

[Howardhn]

Potential Issues:

1. Empty Anchor: The tag contains no content, making it invisible to users unless styled with CSS.
2. Image Display: Despite linking to an image, the code uses an anchor tag instead of an tag, which may prevent the image from rendering.
3. CSS Classes: The use of "!decoration-primary-700" suggests Tailwind CSS usage, but this might cause unintended styling effects.

Recommendations: While a clickable image is desired, nest the tag within the tag:

@douxc