fix(webapp): transform asset url for v-img

Author: Rotzbua

www/webapp/src/App.vue

@@ -29,7 +29,7 @@
     <v-app-bar app class="white">
       <v-toolbar-title><router-link :to="{name: 'home'}">
         <v-img
-                :src="require('./assets/logo.svg')"
+                src="./assets/logo.svg"
                 alt="deSEC Logo"
                 eager
                 contain

www/webapp/src/views/AboutPage.vue

@@ -3,7 +3,7 @@
     <v-card outline tile class="pa-md-12 pa-8 elevation-4" style="overflow: hidden">
       <div class="d-md-block logo-bg pt-4">
         <v-img
-                  :src="require('../assets/logo.notext.svg')"
+                  src="../assets/logo.notext.svg"
                   alt="deSEC Logo"
                   contain
                   height="90%"

www/webapp/src/views/DonatePage.vue

@@ -113,7 +113,7 @@
                     you can use one of the other methods, that would be appreciated!
                   </p>
                   <v-layout class="justify-center">
-                    <v-img :src="require('../assets/paypal-qrcode.png')" alt="PayPal QR Code" style="max-width: 256px"></v-img>
+                    <v-img src="../assets/paypal-qrcode.png" alt="PayPal QR Code" style="max-width: 256px"></v-img>
                   </v-layout>
                 </v-expansion-panel-content>
               </v-expansion-panel>

www/webapp/src/views/HomePage.vue

@@ -80,7 +80,7 @@
       <v-row align="center" class="py-2" justify="center">
         <v-col class="col-12 col-lg-3 py-4">
           <v-layout class="justify-center">
-            <img loading="lazy" :src="require('../assets/non-free/sse.logo.png')" alt="SSE Logo" class="mr-6" style="max-width: 160px; width: 100%"/>
+            <img loading="lazy" src="../assets/non-free/sse.logo.png" alt="SSE Logo" class="mr-6" style="max-width: 160px; width: 100%"/>
           </v-layout>
         </v-col>
         <v-col class="col-12 col-sm-10 col-lg-9 py-4 text-center">
@@ -92,7 +92,7 @@
       <v-row align="center" class="py-2" justify="center">
         <v-col class="col-12 col-lg-3 py-4">
           <v-layout class="justify-center">
-            <img loading="lazy" :src="require('../assets/non-free/nlnet.logo.svg')" alt="NLnet Foundation Logo" class="mr-6" style="max-width: 180px; width: 100%"/>
+            <img loading="lazy" src="../assets/non-free/nlnet.logo.svg" alt="NLnet Foundation Logo" class="mr-6" style="max-width: 180px; width: 100%"/>
           </v-layout>
         </v-col>
         <v-col class="col-12 col-sm-10 col-lg-9 py-4 text-center">
@@ -106,7 +106,7 @@
       <v-row align="center" class="py-2" justify="center">
         <v-col class="col-12 col-lg-3 py-4">
           <v-layout class="justify-center">
-            <img loading="lazy" :src="require('../assets/non-free/ripe-ncc.logo.svg')" alt="RIPE NCC Logo" class="mr-6" style="margin-bottom: -7%; margin-top: -7%; max-width: 240px; width: 100%"/>
+            <img loading="lazy" src="../assets/non-free/ripe-ncc.logo.svg" alt="RIPE NCC Logo" class="mr-6" style="margin-bottom: -7%; margin-top: -7%; max-width: 240px; width: 100%"/>
           </v-layout>
         </v-col>
         <v-col class="col-12 col-sm-10 col-lg-9 py-4 text-center">
@@ -118,7 +118,7 @@
       <v-row align="center" class="py-2" justify="center">
         <v-col class="col-12 col-lg-3 py-4">
           <v-layout class="justify-center">
-            <img loading="lazy" :src="require('../assets/non-free/sox.logo.svg')" alt="SOX Logo" class="mr-6" style="max-width: 170px; width: 100%"/>
+            <img loading="lazy" src="../assets/non-free/sox.logo.svg" alt="SOX Logo" class="mr-6" style="max-width: 170px; width: 100%"/>
           </v-layout>
         </v-col>
         <v-col class="col-12 col-sm-10 col-lg-9 py-4 text-center">
@@ -137,8 +137,8 @@
       </v-row>
       <v-row justify="center">
         <v-col class="py-4 text-center">
-          <a href="https://nextcloud.com/"><img loading="lazy" :src="require('../assets/non-free/nextcloud-logo-inverted.svg')" alt="Nextcloud Logo" class="mx-6 my-2" style="display: inline-block; max-height: 113px; max-width: 160px; width: 100%"/></a>
-          <a href="https://www.hanssonit.se/"><img loading="lazy" :src="require('../assets/non-free/hanssonit.logo.png')" alt="Hansson IT Logo" class="mx-6 my-2" style="display: inline-block; max-height: 113px; max-width: 160px; width: 100%"/></a>
+          <a href="https://nextcloud.com/"><img loading="lazy" src="../assets/non-free/nextcloud-logo-inverted.svg" alt="Nextcloud Logo" class="mx-6 my-2" style="display: inline-block; max-height: 113px; max-width: 160px; width: 100%"/></a>
+          <a href="https://www.hanssonit.se/"><img loading="lazy" src="../assets/non-free/hanssonit.logo.png" alt="Hansson IT Logo" class="mx-6 my-2" style="display: inline-block; max-height: 113px; max-width: 160px; width: 100%"/></a>
         </v-col>
       </v-row>
     </v-container>
@@ -167,15 +167,15 @@
             </div>
           </v-card-text>
           <v-img
-            :src="require('../assets/anycast.worldmap.svg')" alt="World Map of Anycast POPs" contain
+            src="../assets/anycast.worldmap.svg" alt="World Map of Anycast POPs" contain
             class="justify-center"
             style="display: block; width: 100%; aspect-ratio: 2/1"
           >
             <v-tooltip bottom v-for="f in frontends" :key="f.host">
               <template #activator="{ on }">
                 <v-img
                   v-on="on"
-                  :src="require('../assets/mapmarker.svg')" alt="Anycast POP" height="2em" width="2em"
+                  src="../assets/mapmarker.svg" alt="Anycast POP" height="2em" width="2em"
                   :style="{left: f.left, top: f.top}"
                   style="transform: translate(-50%, -100%); position: absolute; overflow: visible;" contain
                 >

www/webapp/vite.config.js

@@ -11,7 +11,13 @@ export default defineConfig({
         'process.env.BUILD': '"web"' // fix for [email protected]
     },
     plugins: [
-        vue(),
+        vue({
+            template: {
+                transformAssetUrls: {
+                    'v-img': ['src'],
+                },
+            },
+        }),
         Components({
             resolvers: [VuetifyResolver()],
         }),