Handle broken images more gracefully (#10879)

Fixes #10853

app/src/modules/users/routes/item.vue

@@ -103,7 +103,12 @@
 			<div v-if="isNew === false" class="user-box">
 				<div class="avatar">
 					<v-skeleton-loader v-if="loading || previewLoading" />
-					<img v-else-if="avatarSrc" :src="avatarSrc" :alt="t('avatar')" />
+					<img
+						v-else-if="avatarSrc && !avatarError"
+						:src="avatarSrc"
+						:alt="t('avatar')"
+						@error="avatarError = $event"
+					/>
 					<v-icon v-else name="account_circle" outline x-large />
 				</div>
 				<div class="user-box-content">
@@ -261,6 +266,8 @@ export default defineComponent({
 		const confirmDelete = ref(false);
 		const confirmArchive = ref(false);
 
+		const avatarError = ref(null);
+
 		const title = computed(() => {
 			if (loading.value === true) return t('loading');
 
@@ -369,6 +376,7 @@ export default defineComponent({
 			revisionsAllowed,
 			validationErrors,
 			revert,
+			avatarError,
 		};
 
 		function useBreadcrumb() {