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: