Fix a logic to get the base URL of a background image (#117)

streamlit_drawable_canvas/__init__.py

@@ -5,6 +5,7 @@
 from hashlib import md5
 
 import numpy as np
+import streamlit as st
 import streamlit.components.v1 as components
 import streamlit.elements.image as st_image
 from PIL import Image
@@ -124,9 +125,7 @@ def st_canvas(
         background_image_url = st_image.image_to_url(
             background_image, width, True, "RGB", "PNG", f"drawable-canvas-bg-{md5(background_image.tobytes()).hexdigest()}-{key}" 
         )
-        # always send relative URLs, the frontend handles this
-        if background_image_url[0] == '/':
-            background_image_url = background_image_url[1:]
+        background_image_url = st._config.get_option("server.baseUrlPath") + background_image_url
         background_color = ""
 
     # Clean initial drawing, override its background color

streamlit_drawable_canvas/frontend/src/DrawableCanvas.tsx

@@ -13,6 +13,20 @@ import UpdateStreamlit from "./components/UpdateStreamlit"
 import { useCanvasState } from "./DrawableCanvasState"
 import { tools, FabricTool } from "./lib"
 
+function getStreamlitBaseUrl(): string | null {
+  const params = new URLSearchParams(window.location.search)
+  const baseUrl = params.get("streamlitUrl")
+  if (baseUrl == null) {
+    return null
+  }
+
+  try {
+    return new URL(baseUrl).origin
+  } catch {
+    return null
+  }
+}
+
 /**
  * Arguments Streamlit receives from the Python side
  */
@@ -113,9 +127,8 @@ const DrawableCanvas = ({ args }: ComponentProps) => {
       bgImage.onload = function() {
         backgroundCanvas.getContext().drawImage(bgImage, 0, 0);
       };
-      const params = new URLSearchParams(window.location.search);
-      const baseUrl = params.get('streamlitUrl')
-      bgImage.src = baseUrl + backgroundImageURL;
+      const baseUrl = getStreamlitBaseUrl() ?? ""
+      bgImage.src = baseUrl + backgroundImageURL
     }
   }, [
     canvas,