Show img in diary too

frontend/src/views/DiaryView.vue

@@ -96,10 +96,11 @@
                     <h3>Teilnehmer</h3>
                     <ul>
                         <li v-for="member in sortedMembers()" :key="member.id">
-                                <input type="checkbox" :value="member.id" @change="toggleParticipant(member.id)"
-                                    :checked="isParticipant(member.id)">
-                                <span @click="openNotesModal(member)" class="clickable">{{ member.firstName }} {{
-                                    member.lastName }}</span>
+                            <input type="checkbox" :value="member.id" @change="toggleParticipant(member.id)"
+                                :checked="isParticipant(member.id)">
+                            <span @click="openNotesModal(member)" class="clickable">{{ member.firstName }} {{
+                                member.lastName }}</span>
+                            <span @click="showPic(member)" class="img-icon" v-if="member.hasImage">&#x1F5BC;</span>
                         </li>
                     </ul>
                     <h3>Aktivitäten</h3>
@@ -147,6 +148,9 @@
                 </div>
             </div>
         </div>
+        <div v-if="showImage" class="memberImage">
+            <img :src="imageUrl" @click="closeImage" />
+        </div>
     </div>
 </template>
 
@@ -189,6 +193,8 @@ export default {
             },
             predefinedActivities: [],
             showDropdown: false,
+            showImage: false,
+            imageUrl: '',
         };
     },
     watch: {
@@ -647,7 +653,26 @@ export default {
                 }
                 return firstNameComparison;
             });
-        }
+        },
+        async showPic(member) {
+            this.loadMemberImage(member);
+            this.showImage = true;
+        },
+        closeImage() {
+            this.showImage = false;
+            this.imageUrl = '';
+        },
+        async loadMemberImage(member) {
+            try {
+                const response = await apiClient.get(`/clubmembers/${this.currentClub}/image/${member.id}`, {
+                    responseType: 'blob',
+                });
+                this.imageUrl = URL.createObjectURL(response.data);
+            } catch (error) {
+                console.error("Failed to load member image:", error);
+                this.imageUrl = null; 
+            }
+        },
     },
     async mounted() {
         await this.init();
@@ -838,4 +863,24 @@ input[type="number"] {
 .modal-right {
     flex: 1;
 }
+
+.img-icon {
+    cursor: pointer;
+}
+
+.memberImage {
+    position: fixed;
+    max-width: 500px;
+    max-height: 500px;
+    top: calc(50% - 250px);
+    left: calc(50% - 250px);
+    border: 2px solid #555;
+    box-shadow: 4px 4px 3px #aaa;
+    overflow: hidden;
+    padding: 3px;
+}
+.memberImage > img {
+    max-width: 100%;
+    max-height: 100%;
+}
 </style>

frontend/src/views/MembersView.vue

@@ -272,7 +272,7 @@ export default {
                 member.imageUrl = imageUrl;
             } catch (error) {
                 console.error("Failed to load member image:", error);
-                member.imageUrl = null; // Fallback, falls das Bild nicht geladen werden kann
+                member.imageUrl = null; 
             }
         },
     }