Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#133 Fix an issue of background image does not show up when server base URL path is specified #134

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from

Conversation

drnguyenn
Copy link

Close #133

Summary

Fix an issue of the background image does not show up when Streamlit server base URL path is specified (via config.toml file, --server.baseUrlPath when running, or environment variable STREAMLIT_SERVER_BASE_URL_PATH).
Version: 0.9.3

Description

The background_image_url obtained from st_image.image_to_url has the format: /media/xxxxxx.png.
If we specify the server.baseUrlPath like, for example, foo:

background_image_url = st._config.get_option("server.baseUrlPath") + background_image_url
# background_image_url = "foo/media/xxxxxx.png"

And when the URL is constructed at the frontend side with the origin:

const baseUrl = getStreamlitBaseUrl() ?? ""
// baseUrl = "http://localhost:8501"
bgImage.src = baseUrl + backgroundImageURL
// bgImage.src = "http://localhost:8501foo/media/xxxxxx.png"

A single slash "/" is missing between the origin and the base path, so the image can not be loaded.

This PR handles the server.baseUrlPath a little bit before appending it to the head of the image URL returned from st_image.image_to_url. I strip all the extra leading and trailing slashes if there are any and then add a single one to the beginning so that the frontend side can construct the correct path.

base_url_path: str = st._config.get_option("server.baseUrlPath").strip("/")
if base_url_path:
    base_url_path = "/" + base_url_path
background_image_url = base_url_path + background_image_url

How Has This Been Tested?

I've tested locally in Docker environment and the original example app.py in README.md:
Dockerfile:

FROM node:16-alpine AS react-app

WORKDIR /app/frontend

COPY streamlit_drawable_canvas/frontend ./

RUN npm run build

FROM python:3.7

WORKDIR /app

COPY setup.py README.md ./

RUN pip install --upgrade pip && \
    pip install -e .

COPY streamlit_drawable_canvas/__init__.py streamlit_drawable_canvas/

COPY --from=react-app /app/frontend/build streamlit_drawable_canvas/frontend/build/

COPY app.py ./

ENTRYPOINT ["streamlit", "run", "app.py"]
  1. Build a test image:
docker build -t streamlit_drawable_canvas_test .
  1. Run the container:
docker run --name streamlit_drawable_canvas_test --rm -p 8501:8501 streamlit_drawable_canvas_test --server.baseUrlPath foo/bar

You can also try different strange values for server.baseUrlPath like ///foo/bar//, etc.

  1. Open browser and confirm that the background image is always displayed correctly.

@drnguyenn
Copy link
Author

@andfanilo Hi. I've made a small fix to the problem described in #133.
Can you please take a look?

@supern8ent
Copy link

@drnguyenn This solves my problem (I deploy to google cloud run with a load balancer that routes to a subpath)! Thank you so much!

@drnguyenn
Copy link
Author

@supern8ent That's great. I'm glad that it can help you.

@andfanilo
Copy link
Owner

Oh my, I missed the first notification, I'm so sorry!
Let me put that in my todo list for next week, especially since another person has validated it works :)

@drnguyenn
Copy link
Author

@andfanilo Thank you so much. I hope it's worth your time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Background image does not show up when server base URL path is specified
3 participants