Images Not Displaying Correctly in langflow (1.0.5) Docker Container Behind Traefik Proxy

[edumelocmrj]

I am trying to implement langflow (1.0.5) as a Docker container protected by the Traefik proxy and managed by Portainer. The installation worked well, and langflow is fully operational. However, the images and icons presented by the service exposed on the Internet refer to "http://localhost:7860/..." and, obviously, they cannot be displayed at end user's browser. Scouring the source code, I saw that the environment variable "BACKEND_URL" (e.g., <img src={${BACKEND_URL.slice(0, BACKEND_URL.length - 1,)}${BASE_URL_API}files/profile_pictures/${userData?.profile_image ?? "Space/046-rocket.svg"} ?? profileCircle} className="h-7 w-7 shrink-0 focus-visible:outline-0"/>) should provide the public URL for the responses coming from the server, but the container ignores this variable and always displays the images as src=localhost:7860...". Does anyone have any tips?

This is my stack entries in portainer

services:
langflow:
image: langflowai/langflow:latest
ports:
- "7860:7860"
depends_on:
- postgres
environment:
- LANGFLOW_DATABASE_URL=postgresql://langflow:langflow@postgres:5432/langflow
#- LANGFLOW_CONFIG_DIR=/var/lib/langflow # If uncomment this line, langflow crashes---WHY???
- LANGFLOW_SUPERUSER=
- LANGFLOW_SUPERUSER_PASSWORD=
- LANGFLOW_NEW_USER_IS_ACTIVE=true
#- LANGFLOW_SECRET_KEY= # I prefer to fill from the application
- LANGFLOW_AUTO_LOGIN=false
- LANGFLOW_HOST=0.0.0.0
- BACKEND_URL=https://langflow.my-domain.com/ # Always put the slash '/' at the end

labels:
  - "traefik.enable=true"
  - "traefik.http.routers.langflow.rule=Host(`<https://langflow.my-domain.com>`)" # My public FDN
  - "traefik.http.routers.langflow.entrypoints=web,websecure"
  - "traefik.http.routers.langflow.tls.certresolver=cloudflare"
  - "traefik.http.services.langflow.loadbalancer.server.port=7860"

volumes:
  - langflow-data:/var/lib/langflow

postgres:
image: postgres:16
environment:
POSTGRES_USER: langflow
POSTGRES_PASSWORD: langflow
POSTGRES_DB: langflow
ports:
- "5432:5432"
volumes:
- langflow-postgres:/var/lib/postgresql/data

volumes:
langflow-postgres:
langflow-data:

networks:
default:
name: langflow
external: false

[dosubot]

Hello, @edumelocmrj! I'm here to help you with any issues you're experiencing while waiting for a human maintainer. Let's get to the bottom of this together.

To resolve the issue with images not displaying correctly in your Langflow Docker container setup, you need to ensure that the BACKEND_URL environment variable is correctly set and used in both the backend and frontend services. Here is an updated version of your docker-compose.yml file:

version: "3.8"
services:
  langflow:
    image: langflowai/langflow:latest
    ports:
      - "7860:7860"
    depends_on:
      - postgres
    environment:
      - LANGFLOW_DATABASE_URL=postgresql://langflow:langflow@postgres:5432/langflow
      - LANGFLOW_SUPERUSER=<MY-LOGIN>
      - LANGFLOW_SUPERUSER_PASSWORD=<MY-PASS>
      - LANGFLOW_NEW_USER_IS_ACTIVE=true
      - LANGFLOW_AUTO_LOGIN=false
      - LANGFLOW_HOST=0.0.0.0
      - BACKEND_URL=https://langflow.my-domain.com/ # Ensure the trailing slash is included
    
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.langflow.rule=Host(`langflow.my-domain.com`)" # My public FDN
      - "traefik.http.routers.langflow.entrypoints=web,websecure"
      - "traefik.http.routers.langflow.tls.certresolver=cloudflare"
      - "traefik.http.services.langflow.loadbalancer.server.port=7860"
 
    volumes:
      - langflow-data:/var/lib/langflow

  postgres:
    image: postgres:16
    environment:
      POSTGRES_USER: langflow
      POSTGRES_PASSWORD: langflow
      POSTGRES_DB: langflow
    ports:
      - "5432:5432"
    volumes:
      - langflow-postgres:/var/lib/postgresql/data
  
volumes:
  langflow-postgres:
  langflow-data:

networks:
  default:
    name: langflow
    external: false

Ensure that the BACKEND_URL is set to your public URL with a trailing slash. This should help the frontend service correctly reference the images using the public URL instead of localhost:7860 ^[1][2].

To continue talking to Dosu, mention @dosu.

[edumelocmrj]

@Eliotdoesprogramming

I am using it exactly as you suggested, but it doesn't work

[oriondesign2015]

Up