Handle broken images more gracefully (#10879)

Fixes #10853

app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue

@@ -42,7 +42,13 @@
 
 			<router-link :to="userProfileLink">
 				<v-avatar v-tooltip.right="userFullName" tile large :class="{ 'no-avatar': !avatarURL }">
-					<img v-if="avatarURL" :src="avatarURL" :alt="userFullName" class="avatar-image" />
+					<img
+						v-if="avatarURL && !avatarError"
+						:src="avatarURL"
+						:alt="userFullName"
+						class="avatar-image"
+						@error="avatarError = $event"
+					/>
 					<v-icon v-else name="account_circle" outline />
 				</v-avatar>
 			</router-link>
@@ -77,6 +83,8 @@ export default defineComponent({
 			return addTokenToURL(getRootPath() + `assets/${userStore.currentUser.avatar.id}?key=system-medium-cover`);
 		});
 
+		const avatarError = ref(null);
+
 		const userProfileLink = computed<string>(() => {
 			const id = userStore.currentUser?.id;
 			return `/users/${id}`;
@@ -88,7 +96,17 @@ export default defineComponent({
 
 		const userFullName = userStore.fullName;
 
-		return { t, userFullName, avatarURL, userProfileLink, signOutActive, signOutLink, notificationsDrawerOpen, unread };
+		return {
+			t,
+			userFullName,
+			avatarURL,
+			userProfileLink,
+			signOutActive,
+			signOutLink,
+			notificationsDrawerOpen,
+			unread,
+			avatarError,
+		};
 	},
 });
 </script>