Workaround vite problem on GH pages

Author: dabreegster

web/src/App.svelte

@@ -86,10 +86,22 @@
         console.log(e.detail.error);
       }}
       images={[
-        { id: "walk_cycle_only", url: "/filters/walk_cycle_only_icon.gif" },
-        { id: "no_entry", url: "/filters/no_entry_icon.gif" },
-        { id: "bus_gate", url: "/filters/bus_gate_icon.gif" },
-        { id: "school_street", url: "/filters/school_street_icon.gif" },
+        {
+          id: "walk_cycle_only",
+          url: `${import.meta.env.BASE_URL}/filters/walk_cycle_only_icon.gif`,
+        },
+        {
+          id: "no_entry",
+          url: `${import.meta.env.BASE_URL}/filters/no_entry_icon.gif`,
+        },
+        {
+          id: "bus_gate",
+          url: `${import.meta.env.BASE_URL}/filters/bus_gate_icon.gif`,
+        },
+        {
+          id: "school_street",
+          url: `${import.meta.env.BASE_URL}/filters/school_street_icon.gif`,
+        },
       ]}
     >
       <div bind:this={mapDiv} />

web/src/edit/ChangeModalFilter.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { Modal, notNull } from "../common";
 
+  // TODO Use of import.meta.env.BASE_URL below is to workaround https://github.com/vitejs/vite/issues/10601
+
   export let filterType: string;
 
   let choices = [
@@ -41,17 +43,17 @@
               disabled={filterType == name}
               on:click={() => (filterType = name)}
               ><img
-                src={`/filters/${name}_icon.gif`}
+                src={`${import.meta.env.BASE_URL}/filters/${name}_icon.gif`}
                 width="80"
                 alt={label}
-              /><br/>{label}</button
+              /><br />{label}</button
             >
           </div>
         {/each}
       </td>
       <td>
         <img
-          src={`/filters/${filterType}.gif`}
+          src={`${import.meta.env.BASE_URL}/filters/${filterType}.gif`}
           height="300"
           alt={currentTriple[1]}
         />