fix: move the assets into the src and reference them relatively

When the app's build is deployed in github pages under the subdir /ner-annotator/, the image files aren't loading as they are referenced using absolute paths in the components. Vite build doesn't automatically update absolute paths to include the BASE. So the files are moved into the src dir and referenced using relative paths.
tecoholic · Dec 3, 2024 · 4a4b1f6 · 4a4b1f6
1 parent cda0ee8
commit 4a4b1f6
Show file tree

Hide file tree

Showing 14 changed files with 15 additions and 23 deletions.
diff --git a/docs/assets/index-BXYN3bSs.js → docs/assets/index-Bz3un_3O.js b/docs/assets/index-BXYN3bSs.js → docs/assets/index-Bz3un_3O.js
diff --git a/docs/assets/step-1.png → docs/assets/step-1-DkgUeXE1.png b/docs/assets/step-1.png → docs/assets/step-1-DkgUeXE1.png
diff --git a/docs/assets/step-2.png → docs/assets/step-2-B_Lc3D-V.png b/docs/assets/step-2.png → docs/assets/step-2-B_Lc3D-V.png
diff --git a/docs/assets/step-3.png → docs/assets/step-3-BA0D2192.png b/docs/assets/step-3.png → docs/assets/step-3-BA0D2192.png
diff --git a/docs/assets/styles.scss b/docs/assets/styles.scss
diff --git a/docs/index.html b/docs/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>NER Annotator for SpaCy</title>
-    <script type="module" crossorigin src="/ner-annotator/assets/index-BXYN3bSs.js"></script>
+    <script type="module" crossorigin src="/ner-annotator/assets/index-Bz3un_3O.js"></script>
     <link rel="stylesheet" crossorigin href="/ner-annotator/assets/index-eh-puVY4.css">
   </head>
   <body>

diff --git a/public/assets/icon_32.png b/public/assets/icon_32.png
diff --git a/public/assets/styles.scss b/public/assets/styles.scss
diff --git a/docs/assets/icon_32.png → src/assets/icon_32.png b/docs/assets/icon_32.png → src/assets/icon_32.png
diff --git a/public/assets/step-1.png → src/assets/step-1.png b/public/assets/step-1.png → src/assets/step-1.png
diff --git a/public/assets/step-2.png → src/assets/step-2.png b/public/assets/step-2.png → src/assets/step-2.png
diff --git a/public/assets/step-3.png → src/assets/step-3.png b/public/assets/step-3.png → src/assets/step-3.png
diff --git a/src/components/HelpDialog.vue b/src/components/HelpDialog.vue
@@ -27,7 +27,7 @@
                 color="blue"
               >
                 <q-img
-                  src="/assets/step-1.png"
+                  src="../assets/step-1.png"
                   spinner-color="white"
                   class="rounded-borders"
                   style="border: 1px solid #ccc; width: 80%"
@@ -56,7 +56,7 @@
                 color="pink"
               >
                 <q-img
-                  src="/assets/step-2.png"
+                  src="../assets/step-2.png"
                   spinner-color="white"
                   class="rounded-borders"
                   style="border: 1px solid #ccc"
@@ -90,7 +90,7 @@
                 color="green"
               >
                 <q-img
-                  src="/assets/step-3.png"
+                  src="../assets/step-3.png"
                   spinner-color="white"
                   class="rounded-borders"
                   style="border: 1px solid #ccc; width: 70%"

diff --git a/src/components/menubar/MenuBar.vue b/src/components/menubar/MenuBar.vue
@@ -3,7 +3,7 @@
     <div class="q-pa-sm q-pl-md row items-center">
       <div>
         <q-avatar size="xs">
-          <img src="/assets/icon_32.png" />
+          <img :src="appIconUrl" />
         </q-avatar>
         <span class="q-ml-sm">
           <strong> NER Annotator </strong>
@@ -168,6 +168,7 @@ import { useQuasar } from "quasar";
 import AboutDialog from "../AboutDialog.vue";
 import ExitDialog from "../ExitDialog.vue";
 import HelpDialog from "../HelpDialog.vue";
+import AppIcon from "../../assets/icon_32.png";
 
 export default {
   name: "MenuBar",
@@ -199,6 +200,7 @@ export default {
       showAbout: false,
       pendingClick: null,
       showHelp: false,
+      appIconUrl: AppIcon,
     };
   },
   computed: {