Merged PR 30: #30 Prepare for deploy. Images need to be public, added swa-cli. Defined VITE...

#30 Prepare for deploy. Images need to be public, added swa-cli. Defined VITE_API_URL to the env var for azure

Related work items: #30

.env.production

@@ -1 +1 @@
-VITE_API_URL=todo
+VITE_API_URL=https://hutopy.azurewebsites.net/

src/layouts/DefaultLayout.vue

@@ -6,9 +6,9 @@
     <v-card style="z-index: 1000; background-color: #ffff;" class="hidden-sm-and-down" hidden-sm-and-down elevation="5">
       <v-container style="z-index: 2000; margin-bottom: .8%; margin-top: -.3%; margin-right: 1%;">
         <v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
-          <v-menu :location="location">
+          <v-menu>
             <template v-slot:activator="{ props }">
-              <div class="d-flex align-center" v-bind="attrs" v-on="on">
+              <div class="d-flex align-center">
 
                 <!-- Profile picture in the top right corner -->
                 <img src="/images/anonyme.png" class="header-profile-icon mr-2" alt="Logo">

src/layouts/FooterLayout.vue

@@ -10,7 +10,7 @@
           <v-row justify="center" style="margin-top: 30px;">
             <v-col cols="5" lg="5" md="5" sm="12" xs="7">
               <router-link :to="{ name: 'home' }">
-                <v-img src="../../../images/hutopy.png" class="hutopy-footer-picture"></v-img>
+                <v-img src="/images/hutopy.png" class="hutopy-footer-picture"></v-img>
               </router-link>
             </v-col>
           </v-row>
@@ -22,21 +22,21 @@
           <v-row justify="center">
             <v-col cols="auto">
               <a href="https://www.facebook.com/profile.php?id=61556819217561">
-                <img class="icons" src="../../images/facebookiconblackpink.png" alt="Description image 2">
+                <img class="icons" src="/public/images/facebookiconblackpink.png" alt="Description image 2">
               </a>
             </v-col>
 
             <!-- Instagram link -->
             <v-col cols="auto">
               <a href="https://www.instagram.com/hutopy.inc/">
-                <img src="../../images/instagramblackpink.png" alt="Description image 3" class="icons">
+                <img src="/public/images/instagramblackpink.png" alt="Description image 3" class="icons">
               </a>
             </v-col>
 
             <!-- Need X Account -->
             <v-col cols="auto">
               <router-link :to="{ name: 'home' }">
-                <img src="../../images/xblackpink.png" alt="Description image 1" class="icons">
+                <img src="/public/images/xblackpink.png" alt="Description image 1" class="icons">
               </router-link>
             </v-col>
           </v-row>

src/views/LoginView.vue

@@ -8,7 +8,7 @@
                     <v-row align="center" justify="center">
                         <!-- Header -->
                         <v-col cols="8" lg="8" md="10" sm="10" xs="10" style=" align-items: center; ">
-                            <img class="login-picture" src="../../images/loginpage/loginhutopy.png">
+                            <img class="login-picture" src="/images/loginpage/loginhutopy.png">
                         </v-col>
 
                         <!-- Connexion-objects -->
@@ -56,7 +56,7 @@
         <div class="sm:hidden flex flex-col items-center justify-start"
             style="background-color: #f4f4f4; height: 100vh;">
             <img style="margin-top: 10%;  width: 350px;  box-shadow: 0 4px 6px rgba(0, 0, 0, .5); border-radius: 25px; "
-                src="../../images/loginpage/loginhutopy.png">
+                src="/images/loginpage/loginhutopy.png">
 
             <h1 class="h1-connexion">Connexion</h1>
             <h2 class="h2-connexion">Comment souhaitez-vous

src/views/SignupView.vue

@@ -4,7 +4,7 @@
 
         <v-row>
             <v-col cols=6 align="center">
-                <v-img class="login-picture" max-width="500" src=" ../../images/hutopyblack.png"
+                <v-img class="login-picture" max-width="500" src="/images/hutopyblack.png"
                     style="margin-top: 100px; margin-bottom: 50px"></v-img>
                 <div class="p-12 bg-white border border-gray-200 rounded-lg mt-6">
                     <h1 class="mb-6 text-2xl font-bold">Sign up</h1>

src/views/main/ContactView.vue

@@ -8,7 +8,7 @@
         <!-- Banner -->
         <v-row class="text-center align-center row-between-logo-text home-row">
           <v-col xl="7" lg="9" md="11" sm="12" xs="12"> </v-col>
-          <img class="hutopy-header-image" src="../../../images/hutopy.png">
+          <img class="hutopy-header-image" src="/images/hutopy.png">
           <v-col class="ml-0 text-left ">
             <!-- Home btn -->
             <RouterLink :to="{ name: 'home' }">
@@ -26,7 +26,7 @@
             <v-row>
               <!-- Contact image -->
               <v-col>
-                <img class="contact-image" src="../../../images/contactpage/contactpicture.png">
+                <img class="contact-image" src="/images/contactpage/contactpicture.png">
               </v-col>
               <!-- Form Information  -->
               <v-col class="row-joinus">
@@ -92,7 +92,7 @@
       <v-spacer style="margin-bottom: 25px;"></v-spacer>
 
       <!-- Contact image -->
-      <v-img src="../../../images/contactpage/contactpicture.png" contain aspect-ratio="16/9"
+      <v-img src="/images/contactpage/contactpicture.png" contain aspect-ratio="16/9"
         style="clip-path: polygon(0 50%, 100% 0, 100% 80%, 0 100%);" class="Scale-80"></v-img>
 
       <!-- Title -->

src/views/main/CreatorFolio.vue

@@ -29,14 +29,14 @@
       <v-row no-gutters class="d-flex justify-space-between align-center" style="margin-left: 3%; margin-right: 3%;">
         <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
           <a href="https://www.facebook.com/profile.php?id=61556819217561">
-            <v-img class="socialicons-mobile invert-color" src="../../../images/facebookicon.png"
+            <v-img class="socialicons-mobile invert-color" src="/images/facebookicon.png"
               alt="Facebook"></v-img>
           </a>
         </v-col>
         <!-- Instagram -->
         <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
           <a href="https://www.instagram.com/">
-            <v-img class="socialicons-mobile" src="../../../images/instaicon.png" alt="Instagram"></v-img>
+            <v-img class="socialicons-mobile" src="/images/instaicon.png" alt="Instagram"></v-img>
           </a>
         </v-col>
         <!-- Profile picture - Small -->
@@ -48,13 +48,13 @@
         <!-- X -->
         <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
           <a href="https://www.x.com/">
-            <v-img class="socialicons-mobile invert-color" src="../../../images/xicon.png" alt="X"></v-img>
+            <v-img class="socialicons-mobile invert-color" src="/images/xicon.png" alt="X"></v-img>
           </a>
         </v-col>
         <!-- TikTok -->
         <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
           <a href="https://www.tiktok.com/">
-            <v-img class="socialicons-mobile invert-color" src="../../../images/tiktok.png" alt="TikTok"></v-img>
+            <v-img class="socialicons-mobile invert-color" src="/images/tiktok.png" alt="TikTok"></v-img>
           </a>
         </v-col>
       </v-row>
@@ -110,7 +110,7 @@
               <v-container style=" overflow-y: hidden;">
                 <!-- Nav-Btn -->
                 <v-col cols="12" class="px-0">
-                  <v-img src="../../../images/hutopy.png" alt="Description de l'image"
+                  <v-img src="/images/hutopy.png" alt="Description de l'image"
                     style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
                   <v-list dense class="main-background">
                     <v-list-item v-for="item in navigationItems">
@@ -240,17 +240,17 @@
                 <v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
                   <v-row>
                     <a href="https://www.facebook.com/profile.php?id=61556819217561">
-                      <img class="socialicons invert-color" src="../../../images/facebookicon.png"
+                      <img class="socialicons invert-color" src="/images/facebookicon.png"
                         alt="Description image 2">
                     </a>
                     <a href="https://www.facebook.com/profile.php?id=61556819217561">
-                      <img class="socialicons" src="../../../images/instaicon.png" alt="Description image 2">
+                      <img class="socialicons" src="/images/instaicon.png" alt="Description image 2">
                     </a>
                     <a href="https://www.facebook.com/profile.php?id=61556819217561">
-                      <img class="socialicons invert-color" src="../../../images/xicon.png" alt="Description image 2">
+                      <img class="socialicons invert-color" src="/images/xicon.png" alt="Description image 2">
                     </a>
                     <a href="https://www.facebook.com/profile.php?id=61556819217561">
-                      <img class="socialicons invert-color" src="../../../images/tiktok.png" alt="Description image 2">
+                      <img class="socialicons invert-color" src="/images/tiktok.png" alt="Description image 2">
                     </a>
                   </v-row>
                 </v-col>
@@ -495,8 +495,8 @@ import StripePayment from '../StripePayment.vue';
 const accepted = ref(false);
 const decline = ref(false);
 
-let imageSrc = '../../../images/guillaimeaime3x.png';
-let profilePicture = '../../../images/guillaume.png';
+let imageSrc = '/images/guillaimeaime3x.png';
+let profilePicture = '/images/guillaume.png';
 let name = 'Guillaume Mousseau'
 let title = 'Créateur de contenus'
 let drawerbottom = false

src/views/main/HomeView.vue

@@ -9,7 +9,7 @@
         <v-row justify="center" align="center">
           <v-col></v-col>
           <v-col cols="5" xl="4" xxl="4">
-            <v-img class="profile-banner" src="../../../images/hutopy.png"></v-img>
+            <v-img class="profile-banner" src="/images/hutopy.png"></v-img>
           </v-col>
           <v-col>
             <v-row>
@@ -33,7 +33,7 @@
         <v-row>
           <v-spacer></v-spacer>
           <v-col cols="7" xs="12" sm="10" md="12" lg="10" xl="7" xxl="6">
-            <v-img class="profile-banner banner-homepage" src="../../../images/homepage/bannierehomepage.png"
+            <v-img class="profile-banner banner-homepage" src="/images/homepage/bannierehomepage.png"
               style="border-radius: 20px;"></v-img>
           </v-col>
           <v-spacer></v-spacer>
@@ -48,7 +48,7 @@
               <v-col cols="4" sm="4" md="4">
                 <v-hover v-slot="{ isHovering, props }">
                   <v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto card-size" v-bind="props">
-                    <v-img src="../../../images/homepage/creer.png"
+                    <v-img src="/images/homepage/creer.png"
                       style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
                     <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" contained>
                       <v-container>
@@ -69,7 +69,7 @@
               <v-col cols="4" sm="4" md="4">
                 <v-hover v-slot="{ isHovering, props }">
                   <v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto card-size " v-bind="props">
-                    <v-img src="../../../images/homepage/partager.png"
+                    <v-img src="/images/homepage/partager.png"
                       style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
                     <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" contained>
                       <v-container>
@@ -91,7 +91,7 @@
               <v-col cols="4" sm="4" md="4">
                 <v-hover v-slot="{ isHovering, props }">
                   <v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto card-size" v-bind="props">
-                    <v-img src="../../../images/homepage/inspirer.png"
+                    <v-img src="/images/homepage/inspirer.png"
                       style="border-radius: 20px; width: 80vw;"></v-img>
                     <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" contained>
                       <v-container>
@@ -124,7 +124,7 @@
 
                 <!-- Subtitle : Votre Hutopy -->
                 <v-img cols="12" style="margin-top: -5%; min-width: 350px;"
-                  src="../../../images/homepage/votrehutopy.png"></v-img>
+                  src="/images/homepage/votrehutopy.png"></v-img>
 
                 <!-- Your Hutopy text-->
                 <p class="text-center text-justify votre_hutopy_fontsize"
@@ -160,18 +160,18 @@
               <v-col cols="6" md="5" lg="6">
                 <v-row justify="center" class="votre-hutopy-img">
                   <v-col cols="6" sm="12" md="12" lg="6">
-                    <v-img style="border-radius: 30px;" src="../../../images/homepage/grinding.png"
+                    <v-img style="border-radius: 30px;" src="/images/homepage/grinding.png"
                       class="hidden-md-and-down" hidden-and-down></v-img>
                   </v-col>
                   <v-col cols="6" sm="12" md="12" lg="6">
-                    <v-img style="border-radius: 30px;" src="../../../images/homepage/microphone.png"></v-img>
+                    <v-img style="border-radius: 30px;" src="/images/homepage/microphone.png"></v-img>
                   </v-col>
                   <v-col cols="6" sm="12" md="6" lg="6">
-                    <v-img style="border-radius: 30px;" src="../../../images/homepage/girlarmy.png"></v-img>
+                    <v-img style="border-radius: 30px;" src="/images/homepage/girlarmy.png"></v-img>
                   </v-col>
                   <v-col cols="6" sm="6" md="6" lg="6">
                     <v-img style="border-radius: 30px;" class="d-none d-md-block"
-                      src="../../../images/homepage/girlvr.png"></v-img>
+                      src="/images/homepage/girlvr.png"></v-img>
                   </v-col>
                 </v-row>
               </v-col>
@@ -196,17 +196,17 @@
             <v-row justify="center" class="profile-images">
               <v-col>
                 <router-link :to="{ name: 'creatorfolio' }">
-                  <img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image  ">
+                  <img src="/images/anonymelarge.png" alt="Profile Image" class="profile-image  ">
                 </router-link>
               </v-col>
               <v-col>
                 <router-link :to="{ name: 'creatorfolio' }">
-                  <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
+                  <img src="/images/guillaume.jpg" alt="Profile Image" class="profile-image">
                 </router-link>
               </v-col>
               <v-col>
                 <router-link :to="{ name: 'creatorfolio' }">
-                  <img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image">
+                  <img src="/images/anonymelarge.png" alt="Profile Image" class="profile-image">
                 </router-link>
               </v-col>
             </v-row>
@@ -221,13 +221,13 @@
     <div class="md:hidden flex flex-col items-center justify-center">
       <div>
         <!--Banner -->
-        <v-img src="../../../images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière"></v-img>
+        <img src="/images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière">
 
         <!-- Créer -->
         <v-row style="margin-top: 30px;" align="center">
           <v-col cols="6">
             <v-img style="margin-left: 25px; border-radius: 20px; width: 85%;"
-              src="../../../images/homepage/creer.png"></v-img>
+              src="/images/homepage/creer.png"></v-img>
           </v-col>
           <v-col>
             <p style="margin: 20px; text-align: justify;" class="center-vertical">Libérez votre créativité sur Hutopy,
@@ -250,7 +250,7 @@
           </v-col>
           <v-col cols="6">
             <v-img style="margin-right: 25px; border-radius: 20px; width: 85%;"
-              src="../../../images/homepage/partager.png"></v-img>
+              src="/images/homepage/partager.png"></v-img>
           </v-col>
         </v-row>
 
@@ -258,7 +258,7 @@
         <v-row align="center">
           <v-col cols="6">
             <v-img style="margin-left: 25px; border-radius: 20px; width: 85%;"
-              src="../../../images/homepage/inspirer.png"></v-img>
+              src="/images/homepage/inspirer.png"></v-img>
           </v-col>
           <v-col>
             <p style="margin: 20px; text-align: justify;" class="center-vertical">Devenez une source d'inspiration sur
@@ -272,7 +272,7 @@
 
         <!--  Votre Hutopy : Title  -->
         <v-img style="margin-top: 50px; margin-bottom: 25px; min-width: 350px;"
-          src="../../../images/homepage/votrehutopy.png"></v-img>
+          src="/images/homepage/votrehutopy.png"></v-img>
 
         <!--  Votre Hutopy : Text  -->
         <v-row align="center">
@@ -298,18 +298,18 @@
         <!--  4 pictures  -->
         <v-row style="margin-left: 15px; margin-right: 15px;">
           <v-col cols="6" style="padding-left: 15px; padding-right: 15px;">
-            <v-img style="border-radius: 30px; width: 100%;" src="../../../images/homepage/microphone.png"></v-img>
+            <v-img style="border-radius: 30px; width: 100%;" src="/images/homepage/microphone.png"></v-img>
           </v-col>
           <v-col cols="6" style="padding-left: 15px; padding-right: 15px;">
-            <v-img style="border-radius: 30px; width: 100%;" src="../../../images/homepage/grinding.png"></v-img>
+            <v-img style="border-radius: 30px; width: 100%;" src="/images/homepage/grinding.png"></v-img>
           </v-col>
         </v-row>
         <v-row style="margin-left: 15px; margin-right: 15px;">
           <v-col style="padding-left: 15px; padding-right: 15px;">
-            <v-img style="border-radius: 30px; width: 100%;" src="../../../images/homepage/girlarmy.png"></v-img>
+            <v-img style="border-radius: 30px; width: 100%;" src="/images/homepage/girlarmy.png"></v-img>
           </v-col>
           <v-col style="padding-left: 15px; padding-right: 15px;">
-            <v-img style="border-radius: 30px; width: 100%;" src="../../../images/homepage/girlvr.png"></v-img>
+            <v-img style="border-radius: 30px; width: 100%;" src="/images/homepage/girlvr.png"></v-img>
           </v-col>
         </v-row>
 
@@ -333,17 +333,17 @@
           <v-row justify="center" class="profile-images">
             <v-col cols="8">
               <router-link :to="{ name: 'creatorfolio' }">
-                <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
+                <img src="/images/guillaume.jpg" alt="Profile Image" class="profile-image">
               </router-link>
             </v-col>
             <v-col cols="8">
               <router-link :to="{ name: 'creatorfolio' }">
-                <img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image  ">
+                <img src="/images/anonymelarge.png" alt="Profile Image" class="profile-image  ">
               </router-link>
             </v-col>
             <v-col cols="8">
               <router-link :to="{ name: 'creatorfolio' }">
-                <img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image">
+                <img src="/images/anonymelarge.png" alt="Profile Image" class="profile-image">
               </router-link>
             </v-col>
           </v-row>

src/views/main/YourProfile.vue

@@ -76,8 +76,8 @@ import { ref } from 'vue';
 
 
 
-const profilePictureUrl = ref('../../../images/guillaume.png');
-const bannerImageUrl = ref('../../../images/guillaimeaime3x.png');
+const profilePictureUrl = ref('/images/guillaume.png');
+const bannerImageUrl = ref('/images/guillaimeaime3x.png');
 
 </script>
 

src/views/tos/About.vue

@@ -5,7 +5,7 @@
         <div>
             <v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;" hidden-md-and-down>
                 <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-                    <v-img class="profile-banner" max-height="375" src="./../../../images/tos/headerbackground.png"
+                    <v-img class="profile-banner" max-height="375" src="/images/tos/headerbackground.png"
                         cover style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
                 </v-col>
             </v-row>
@@ -82,7 +82,7 @@
                         <v-row>
                             <v-col>
 
-                                <img src="./../../../images/anonyme.png" alt="Marc-Olivier Hébert">
+                                <img src="/images/anonyme.png" alt="Marc-Olivier Hébert">
                                 <br>
                                 <v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">Marc-Olivier
                                 </v-typography><br> <v-typography class="name"
@@ -95,7 +95,7 @@
                             </v-col>
                             <v-col>
 
-                                <img src="./../../../images/anonyme.png" alt="Dominic Villemure">
+                                <img src="/images/anonyme.png" alt="Dominic Villemure">
                                 <br>
                                 <v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">Dominic
                                 </v-typography><br>
@@ -109,7 +109,7 @@
                             </v-col>
                             <v-col>
 
-                                <img src="./../../../images/anonyme.png" alt="Parcal Marchesseault">
+                                <img src="/images/anonyme.png" alt="Parcal Marchesseault">
                                 <br>
                                 <v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">Pascal
                                 </v-typography><br>
@@ -123,7 +123,7 @@
                             </v-col>
                             <v-col>
 
-                                <img src="./../../../images/anonyme.png" alt="Chloé Beaugrand">
+                                <img src="/images/anonyme.png" alt="Chloé Beaugrand">
                                 <br>
                                 <v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">Chloé
                                 </v-typography><br>

src/views/tos/ContentPolicy.vue

@@ -5,7 +5,7 @@
         <div>
             <v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;" hidden-md-and-down>
                 <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-                    <v-img class="profile-banner" max-height="375" src="./../../../images/tos/headerbackground.png"
+                    <v-img class="profile-banner" max-height="375" src="/images/tos/headerbackground.png"
                         cover style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
                 </v-col>
             </v-row>

src/views/tos/FAQ.vue

@@ -5,7 +5,7 @@
         <div>
             <v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;">
                 <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-                    <v-img class="profile-banner" max-height="375" src="./../../../images/tos/headerbackground.png"
+                    <v-img class="profile-banner" max-height="375" src="/images/tos/headerbackground.png"
                         cover style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
                 </v-col>
             </v-row>

src/views/tos/GuideForCreators.vue

@@ -5,7 +5,7 @@
         <div>
             <v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;">
                 <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-                    <v-img class="profile-banner" max-height="375" src="./../../../images/tos/headerbackground.png"
+                    <v-img class="profile-banner" max-height="375" src="/images/tos/headerbackground.png"
                         cover style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
                 </v-col>
             </v-row>

src/views/tos/HelpAndContact.vue

@@ -5,7 +5,7 @@
         <div>
             <v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;">
                 <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-                    <v-img class="profile-banner" max-height="375" src="./../../../images/tos/headerbackground.png"
+                    <v-img class="profile-banner" max-height="375" src="/images/tos/headerbackground.png"
                         cover style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
                 </v-col>
             </v-row>

src/views/tos/TermsAndConditions.vue

@@ -5,7 +5,7 @@
         <div>
             <v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;" hidden-md-and-down>
                 <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-                    <v-img class="profile-banner" max-height="375" src="./../../../images/tos/headerbackground.png"
+                    <v-img class="profile-banner" max-height="375" src="/images/tos/headerbackground.png"
                         cover style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
                 </v-col>
             </v-row>

swa-cli.config.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
+  "configurations": {
+    "taim-ui": {
+      "appLocation": ".",
+      "outputLocation": "dist",
+      "appBuildCommand": "npm run build",
+      "run": "npm run dev",
+      "appDevserverUrl": "https://hutopy.azurewebsites.net",
+      "apiDevserverUrl": "https://hutopy.azurewebsites.net"
+    }
+  }
+}

vite.config.js

@@ -1,10 +1,13 @@
 import { fileURLToPath, URL } from 'node:url'
-
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
+
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => {
+  // Load environment variables based on the mode
+  const env = loadEnv(mode, process.cwd(), '')
+  return {
     plugins: [
       vue(),
     ],
@@ -12,5 +15,10 @@ export default defineConfig({
       alias: {
         '@': fileURLToPath(new URL('./src', import.meta.url))
       }
+    },
+    define: {
+      // Define a global constant __APP_ENV__ based on loaded environment variables
+      VITE_API_URL: JSON.stringify(env.VITE_API_URL)
+    }
   }
 })