DXF background image shows locally but appears blank in streamlit-drawable-canvas after Streamlit Cloud deploy

Deployment
,
1

Hi everyone,

I deployed a Streamlit app that lets users upload a DXF file and manually draw room polygons over the floor plan.

Everything works fine locally, but after deployment on Streamlit Cloud I found a specific issue:

  • the DXF file uploads successfully

  • the editor dialog opens correctly

  • the drawing canvas appears

  • but the DXF floor plan background does not render

  • the canvas shows only a blank dark area

Technical context:

  • Python app with streamlit

  • using ezdxf to read the DXF

  • converting the DXF geometry into a PIL image

  • passing that image to streamlit-drawable-canvas as background_image

  • locally this works normally

  • in Streamlit Cloud the background image is blank, although the canvas itself still loads

I already handled a previous compatibility issue with streamlit-drawable-canvas and image_to_url, so now I suspect this may be related to:

  • streamlit-drawable-canvas behavior in deployed environments

  • PIL image background rendering inside st_canvas

  • or some limitation when used inside st.dialog

Has anyone faced something similar with:

  • streamlit-drawable-canvas

  • PIL background_image

  • DXF/image overlays

  • or canvas rendering differences between local and Streamlit Cloud?

Any suggestions, workarounds, or alternative approaches would be greatly appreciated.

Thanks in advance.

2

Welcome to the Streamlit community and thanks for the detailed question! This is a common pain point—your issue is almost certainly due to how Streamlit Cloud handles media files and session context, especially with custom components like streamlit-drawable-canvas.

When you pass a PIL image as background_image to st_canvas, it works locally because the file is available on the same server and session. On Streamlit Cloud, media files (like images generated from DXF) may not persist or be accessible across server replicas, leading to blank backgrounds or MediaFileHandler: Missing file errors. This is a known limitation for custom components and dynamic images in cloud deployments. The recommended workaround is to convert your PIL image to a Base64-encoded data URI and pass that to the component, ensuring the image data is sent through the WebSocket and not via HTTP file storage. For details, see the official Streamlit architecture docs and related forum threads confirming this behavior with streamlit-drawable-canvas and background images on Streamlit Cloud.

If you want a code example or step-by-step workaround for converting your PIL image to a Base64 data URI for st_canvas, just let me know!

Sources: