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

[drnguyenn]

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 .

2. 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.

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

[drnguyenn]

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

[supern8ent]

@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]

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

[andfanilo]

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]

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