Added images

src/views/main/Header.vue

@@ -55,13 +55,16 @@
                  <span class="normal-case max-w-xs  hidden md:block">
                  {{ currentUserName }}
                  </span>
-              <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png" alt="Profile Image"
-                   class="ml-2 rounded-full" style="width: 32px; height: 32px;">
+              <img 
+                  :src="currentUser.storedDataUrls.profilePictureUrl" 
+                  alt="Profile Image"
+                  @error="handleProfilePictureError"
+                  class="ml-2 rounded-full" style="width: 32px; height: 32px;">
             </v-btn>
           </template>
 
           <v-list min-width="200px" class=" align-center mt-3 left-3">
-            <div v-if="!currentUser">
+            <div v-if="currentUser.userName === 'Anonyme'">
               <v-list-item class="nav-button">
                 <v-list-item-title>
                   <v-btn to="/login" class="w-100 " variant="plain">Connexion</v-btn>
@@ -69,7 +72,7 @@
               </v-list-item>
             </div>
 
-            <div v-if="currentUser">
+            <div v-if="currentUser.userName !== 'Anonyme'">
               <v-list-item class="nav-button">
                 <router-link :to="`/${currentUserName}`">
                   <v-btn class="w-100 " variant="plain"> {{ currentUserName }}</v-btn>
@@ -101,7 +104,7 @@
 </template>
 
 <script setup>
-import {ref, onMounted, onBeforeUnmount} from "vue";
+import {ref, onMounted, onBeforeUnmount, onBeforeMount} from "vue";
 import {eventBus} from '@/eventBus.js';
 import {useRouter} from 'vue-router';
 import {useUserStore} from "@/stores/user.js";
@@ -110,8 +113,13 @@ const router = useRouter();
 const currentUserName = ref("Anonyme");
 const searchQuery = ref("");
 const showSearch = ref(false);
-let currentUser = null;
+const currentUser = ref(null);
 const userStore = useUserStore();
+const backupProfilePictureUrl = "/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
+
+const handleProfilePictureError = (event) => {
+  event.target.src = backupProfilePictureUrl;
+}
 
 const toggleSidebar = () => {
   eventBus.value.toggleSidebar();
@@ -150,9 +158,9 @@ const logout = () => {
   window.location.reload();
 };
 
-onMounted( () => {
-  currentUser = userStore.getCurrentUser();
-  currentUserName.value = currentUser.userName;
+onBeforeMount( () => {
+  currentUser.value = userStore.getCurrentUser();
+  currentUserName.value = currentUser.value.userName;
 
   document.addEventListener('click', handleClickOutside);
 });