Import images

- Vite base URL now works
- Images are hashed for deployment so can be cached

src/App.svelte

@@ -23,6 +23,7 @@
   import BottomPanel from './components/bottom/BottomPanel.svelte';
   import { t } from './i18n';
   import { consent } from './script/stores/complianceStore';
+  import microbitLogoImage from './imgs/microbit-logo.svg';
 
   ConnectionBehaviours.setInputBehaviour(new InputBehaviour());
   ConnectionBehaviours.setOutputBehaviour(new OutputBehaviour());
@@ -52,7 +53,7 @@
         <ControlBar>
           <img
             class="mr-8"
-            src="/imgs/microbit-logo.svg"
+            src={microbitLogoImage}
             alt="Micro:bit logo"
             width="150px" />
           <h1 class="text-xl font-thin whitespace-nowrap">{$t('content.index.title')}</h1>

src/components/Gesture.svelte

@@ -30,6 +30,7 @@
   import ImageSkeleton from './skeletonloading/ImageSkeleton.svelte';
   import GestureTilePart from './GestureTilePart.svelte';
   import StaticConfiguration from '../StaticConfiguration';
+  import microbitRecordingGuideImage from '../imgs/microbit_record_guide.svg'
 
   // Variables for component
   export let onNoMicrobitSelect: () => void;
@@ -259,7 +260,7 @@
             <ImageSkeleton
               height={95}
               width={140}
-              src="/imgs/microbit_record_guide.svg"
+              src={microbitRecordingGuideImage}
               alt="microbit recording guide" />
           </div>
           <p class=" text-center absolute w-60px right-23px top-30px">

src/components/LoadingSpinner.svelte

@@ -4,8 +4,10 @@
   SPDX-License-Identifier: MIT
  -->
 
-<script></script>
+<script>
+  import loadingSpinnerImage from "../imgs/loadingspinner.gif"
+</script>
 
 <div class="justify-center items-center self-center m-auto">
-  <img alt="loading" src="/imgs/loadingspinner.gif" width="150px" />
+  <img alt="loading" src={loadingSpinnerImage} width="150px" />
 </div>

src/components/bottom/ConnectedLiveGraphButtons.svelte

@@ -9,6 +9,7 @@
   import TypingUtils from '../../script/TypingUtils';
   import { state } from '../../script/stores/uiStore';
   import StandardButton from '../StandardButton.svelte';
+  import loadingSpinnerImage from '../../imgs/loadingspinner.gif';
 
   export let onOutputDisconnectButtonClicked: () => void;
   export let onInputDisconnectButtonClicked: () => void;
@@ -25,7 +26,7 @@
           >{$t('menu.model.disconnect')}</StandardButton>
       {:else}
         <StandardButton onClick={TypingUtils.emptyFunction} color="disabled">
-          <img alt="loading" src="imgs/loadingspinner.gif" style="height:24px" />
+          <img alt="loading" src={loadingSpinnerImage} style="height:24px" />
         </StandardButton>
       {/if}
     {/if}
@@ -37,7 +38,7 @@
         >{$t('footer.disconnectButton')}</StandardButton>
     {:else}
       <StandardButton onClick={TypingUtils.emptyFunction} color="disabled">
-        <img alt="loading" src="/imgs/loadingspinner.gif" style="height:24px" />
+        <img alt="loading" src={loadingSpinnerImage} style="height:24px" />
       </StandardButton>
     {/if}
   </div>

src/components/connection-prompt/bluetooth/BluetoothConnectingDialog.svelte

@@ -19,6 +19,7 @@
   import { DeviceRequestStates } from '../../../script/stores/connectDialogStore';
   import Environment from '../../../script/Environment';
   import StaticConfiguration from '../../../StaticConfiguration';
+  import loadingSpinnerImage from '../../../imgs/loadingspinner.gif'
 
   // callbacks
   export let deviceState: DeviceRequestStates;
@@ -114,7 +115,7 @@
     <!-- Show spinner while connecting -->
     <div class="w-650px flex flex-col justify-center items-center">
       <p>{$t('connectMB.bluetooth.connecting')}</p>
-      <img alt="loading" src="/imgs/loadingspinner.gif" width="100px" />
+      <img alt="loading" src={loadingSpinnerImage} width="100px" />
       <div class="bg-primary rounded w-full h-5">
         <div
           style="width: {`${timeoutProgress * 100}%`};"

src/components/connection-prompt/bluetooth/ConnectBatteryDialog.svelte

@@ -7,6 +7,7 @@
 <script lang="ts">
   import StandardButton from '../../StandardButton.svelte';
   import { t } from '../../../i18n';
+  import microbitConnectedImage from '../../../imgs/stylised-microbit-connected.svg';
 
   export let onNextClick: () => void;
   export let onBackClick: () => void;
@@ -19,7 +20,7 @@
     </p>
     <p>{$t('connectMB.connectBattery.subtitle')}</p>
     <img
-      src="/imgs/stylised-microbit-connected.svg"
+      src={microbitConnectedImage}
       alt="Battery connection diagram"
       class="px-40 pt-5" />
   </div>

src/components/connection-prompt/bluetooth/ConnectCableDialog.svelte

@@ -7,6 +7,7 @@
 <script lang="ts">
   import StandardButton from '../../StandardButton.svelte';
   import { t } from '../../../i18n';
+  import connectCableImage from '../../../imgs/connect-cable.gif';
 
   export let onNextClick: () => void;
   export let onBackClick: () => void;
@@ -35,7 +36,7 @@
       {/if}
     </p>
     <img
-      src="imgs/connect-cable.gif"
+      src={connectCableImage}
       alt="GIF of connecting micro:bit"
       class="px-55 py-5" />
   </div>

src/components/connection-prompt/bluetooth/StartBluetoothDialog.svelte

@@ -7,6 +7,7 @@
 <script lang="ts">
   import StandardButton from '../../StandardButton.svelte';
   import { t } from '../../../i18n';
+  import microbitImage from '../../../imgs/stylised-microbit-black.svg';
 
   export let onNextClick: () => void;
   export let onStartRadioClick: () => void;
@@ -18,7 +19,7 @@
     <p>{$t('connectMB.bluetoothStart.subtitle')}</p>
     <div class="inline-grid grid-cols-3 gap-30 py-20 px-10">
       <div>
-        <img src="imgs/stylised-microbit-black.svg" alt="radio ingredients" />
+        <img src={microbitImage} alt="radio ingredients" />
         <p class="pt-10 text-center font-bold">
           {$t('connectMB.bluetoothStart.requirements1')}
         </p>

src/components/connection-prompt/radio/ConnectCableDialogMB1.svelte

@@ -7,6 +7,7 @@
 <script lang="ts">
   import StandardButton from '../../StandardButton.svelte';
   import { t } from '../../../i18n';
+  import connectCableImage from '../../../imgs/connect-cable.gif';
 
   export let onNextClick: () => void;
   export let onBackClick: () => void;
@@ -20,7 +21,7 @@
     </p>
     <p class="leading-normal">{$t('connectMB.connectCableMB1.subtitle')}</p>
     <img
-      src="imgs/connect-cable.gif"
+      src={connectCableImage}
       alt="GIF of connecting micro:bit"
       class="px-55 py-5" />
   </div>

src/components/connection-prompt/usb/SelectMicrobitDialogUsb.svelte

@@ -8,6 +8,7 @@
   import StandardButton from '../../StandardButton.svelte';
   import { t } from '../../../i18n';
   import Microbits from '../../../script/microbit-interfacing/Microbits';
+  import selectMicrobitImage from '../../../imgs/select-microbit.png';
 
   export let onBackClick: () => void;
   export let onFound: () => void;
@@ -29,7 +30,7 @@
       {$t('connectMB.webPopup')}
     </p>
     <img
-      src="/imgs/select-microbit.png"
+      src={selectMicrobitImage}
       alt="Instructions on how to choose microbit from web popup using usb"
       class="left-0 pt-5" />
     <p class="absolute left-3/4 transform -translate-x-1/2 top-1/2 -translate-y-28">

src/components/connection-prompt/usb/manual/ManualInstallTutorial.svelte

@@ -11,6 +11,9 @@
   import Microbits from '../../../../script/microbit-interfacing/Microbits';
   import ImageSkeleton from '../../../skeletonloading/ImageSkeleton.svelte';
   import Bowser from 'bowser';
+  import transferFirmwareMacOSImage from "../../../../imgs/transfer_firmware_macos.gif"
+  import transferFirmwareChromeOSImage from "../../../../imgs/transfer_firmware_chromeos.gif"
+  import transferFirmwareWindowsImage from "../../../../imgs/transfer_firmware_windows.gif"
 
   export let onConnectBluetoothClick: () => void;
 
@@ -23,13 +26,13 @@
   const getIllustrationGif = (os: string) => {
     switch (os) {
       case 'Chrome OS':
-        return 'imgs/transfer_firmware_chromeos.gif';
+        return transferFirmwareChromeOSImage;
       case 'Windows':
-        return 'imgs/transfer_firmware_windows.gif';
+        return transferFirmwareWindowsImage;
       case 'macOS':
-        return 'imgs/transfer_firmware_macos.gif';
+        return transferFirmwareMacOSImage;
       default:
-        return 'imgs/transfer_firmware_macos.gif';
+        return transferFirmwareMacOSImage;
     }
   };
 

src/components/datacollection/RecordInformationContent.svelte

@@ -8,6 +8,7 @@
   import { t } from '../../i18n';
   import ImageSkeleton from '../skeletonloading/ImageSkeleton.svelte';
   import { getInfoBoxColors } from '../information/InformationComponentUtility';
+  import recordingGuideImage from "../../imgs/microbit_record_guide.svg";
   export let isLightTheme = true;
 
   const colors = getInfoBoxColors(isLightTheme);
@@ -26,7 +27,7 @@
       <ImageSkeleton
         alt="microbit recording guide"
         height={134}
-        src="/imgs/microbit_record_guide.svg"
+        src={recordingGuideImage}
         width={200} />
     </div>
     <p class=" text-center absolute w-60px right-10px top-35px">

src/components/output/OutputGestureStack.svelte

@@ -35,6 +35,9 @@
   import { PinTurnOnState } from './PinSelectorUtil';
   import MBSpecs from '../../script/microbit-interfacing/MBSpecs';
   import Gestures from '../../script/Gestures';
+  import rightArrowImage from '../../imgs/right_arrow.svg';
+  import rightArrowBlueImage from '../../imgs/right_arrow_blue.svg';
+  import blankMicrobitImage from '../../imgs/blank_microbit.svg';
 
   type TriggerAction = 'turnOn' | 'turnOff' | 'none';
 
@@ -251,13 +254,13 @@
     <img
       class="m-auto"
       class:hidden={wasTriggered}
-      src={'imgs/right_arrow.svg'}
+      src={rightArrowImage}
       alt="right arrow icon"
       width="30px" />
     <img
       class="m-auto"
       class:hidden={!wasTriggered || !$state.isInputReady}
-      src={'imgs/right_arrow_blue.svg'}
+      src={rightArrowBlueImage}
       alt="right arrow icon"
       width="30px" />
   </div>
@@ -267,7 +270,7 @@
     <div
       class="w-177px relative rounded-xl bg-transparent h-full border-1 border-primaryborder">
       <ImageSkeleton
-        src="imgs/blank_microbit.svg"
+        src={blankMicrobitImage}
         alt="microbit guide"
         width={177}
         height={144}

src/menus/TrainingMenu.svelte

@@ -9,14 +9,15 @@
   import { state } from '../script/stores/uiStore';
   import { t } from '../i18n';
   import ImageSkeleton from '../components/skeletonloading/ImageSkeleton.svelte';
+  import modelImage from '../imgs/model.svg';
 </script>
 
 <div class="h-40 w-40 m-auto mt-2 flex flex-col justify-center">
   {#if $state.isPredicting}
     <div class="text-white text-center flex flex-col justify-center items-center">
       <ImageSkeleton
         alt="Model Icon"
-        src="imgs/model.svg"
+        src={modelImage}
         height={100}
         width={100}
         loadingColorPrimary="#68BDBF"

src/pages/Homepage.svelte

@@ -5,6 +5,9 @@
  -->
 
 <script lang="ts">
+  import trainModelImage from '../imgs/TrainModel.svg';
+  import inputDataImage from '../imgs/InputData.svg';
+  import testModelImage from '../imgs/TestModel.svg';
   import FrontPageContentTile from '../components/FrontPageContentTile.svelte';
   import StandardButton from '../components/StandardButton.svelte';
   import { t } from '../i18n';
@@ -45,7 +48,7 @@
           <img
             class="mb-5"
             alt="add data"
-            src="/imgs/InputData.svg"
+            src={inputDataImage}
             width={tileImageSize} />
           <p class="text-center w-75">
             {$t('content.index.toolProcessCards.data.description')}
@@ -59,7 +62,7 @@
           <img
             class="mb-5"
             alt="train model"
-            src="/imgs/TrainModel.svg"
+            src={trainModelImage}
             width={tileImageSize} />
           <p class="text-center w-75">
             {$t('content.index.toolProcessCards.train.description')}
@@ -73,7 +76,7 @@
           <img
             class="mb-5"
             alt="test model"
-            src="/imgs/TestModel.svg"
+            src={testModelImage}
             width={tileImageSize} />
           <p class="text-center w-75">
             {$t('content.index.toolProcessCards.model.description')}

src/pages/model/ModelPageStackView.svelte

@@ -23,6 +23,7 @@
   import Microbits from '../../script/microbit-interfacing/Microbits';
   import TrainModelFirstTitle from '../../components/TrainModelFirstTitle.svelte';
   import OutputGesture from '../../components/output/OutputGesture.svelte';
+  import downArrowImage from '../../imgs/down_arrow.svg';
 
   // In case of manual classification, variables for evaluation
   let recordingTime = 0;
@@ -150,7 +151,7 @@
             <div class="text-center ml-0 mb-2 mt-8">
               <img
                 class="m-auto arrow-filter-color"
-                src="/imgs/down_arrow.svg"
+                src={downArrowImage}
                 alt="down arrow icon"
                 width="80px" />
             </div>