langgenius / dify

Dify is an open-source LLM app development platform. Dify's intuitive interface combines AI workflow, RAG pipeline, agent capabilities, model management, observability features and more, letting you quickly go from prototype to production.
https://dify.ai
Other
51.81k stars 7.51k forks source link

The images in the WebClient client are not displaying. #8720

Closed liubaiwu closed 1 month ago

liubaiwu commented 1 month ago

Self Checks

Dify version

0.8.0

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

image When I use Dify WebClient, after a normal deployment to the local environment, I am able to have normal chat output. However, if the output content includes images, the images cannot be displayed properly. This is because when accessing the WebClient locally, the address starts with localhost, but the images are stored on the server side of our deployed open-source Dify. How can I make the images display correctly?

✔️ Expected Behavior

In the configuration file of our WebClient client, we have already set the value for NEXT_PUBLIC_API_URL, and other functionalities are working normally. However, it seems that the image URLs are not using this address to obtain the full image URLs. We hope to have the images display correctly.

❌ Actual Behavior

When I use Dify WebClient, after a normal deployment to the local environment, I am able to have normal chat output. However, if the output content includes images, the images cannot be displayed properly. This is because when accessing the WebClient locally, the address starts with localhost, but the images are stored on the server side of our deployed open-source Dify. How can I make the images display correctly?

dosubot[bot] commented 1 month ago

@liubaiwu Hello there! I'm here to help you out with any bugs, questions, or contributions you have regarding Dify. Let's tackle this issue together!

I found a similar unsolved discussion that might be relevant to your issue: Where are the images and files generated by Dify stored? Also, the tool's API cannot access the generated files [1]. Additionally, there is a closed issue that might provide some insights: Is there a way to reference local images in model responses/annotation replies? [2].

To make the images display correctly in the Dify WebClient when accessed locally with an address starting with localhost, you need to ensure that the domain name/URL configurations are correctly set to avoid cross-domain issues. Specifically, you should update the following configuration items in docker-compose.yml to use the correct domain name or IP address:

CONSOLE_API_URL: http://localhost:your_port
CONSOLE_WEB_URL: http://localhost:your_port
SERVICE_API_URL: http://localhost:your_port
APP_API_URL: http://localhost:your_port
APP_WEB_URL: http://localhost:your_port

Replace your_port with the appropriate port number if necessary. This will ensure that the front end and back end are correctly aligned and can communicate without cross-domain issues [3].

Additionally, ensure that the NEXT_PUBLIC_API_URL in the WebClient's configuration file is set correctly:

NEXT_PUBLIC_API_PREFIX=http://localhost:5001/console/api
NEXT_PUBLIC_PUBLIC_API_PREFIX=http://localhost:5001/api

This configuration should help in making sure that the image URLs are correctly generated and accessible [4][5].

To continue talking to Dosu, mention @dosu.

crazywoola commented 1 month ago

3001 is frontend service, and the image link is generated by the backend, it's obvious that the url isn't correct. You need to config the CONSOLE_API_URL and FILES_URL id .env