Handle broken images more gracefully (#10879)

Fixes #10853

app/src/interfaces/file/file.vue

@@ -21,7 +21,12 @@
 									'is-svg': file?.type?.includes('svg'),
 								}"
 							>
-								<img v-if="imageThumbnail" :src="imageThumbnail" :alt="file.title" />
+								<img
+									v-if="imageThumbnail && !imageThumbnailError"
+									:src="imageThumbnail"
+									:alt="file.title"
+									@error="imageThumbnailError = $event"
+								/>
 								<span v-else-if="fileExtension" class="extension">
 									{{ fileExtension }}
 								</span>
@@ -197,6 +202,8 @@ export default defineComponent({
 			return addQueryToPath(assetURL.value, { key: 'system-small-cover' });
 		});
 
+		const imageThumbnailError = ref(null);
+
 		const { edits, stageEdits } = useEdits();
 		const { url, isValidURL, loading: urlLoading, importFromURL } = useURLImport();
 
@@ -219,6 +226,7 @@ export default defineComponent({
 			editDrawerActive,
 			edits,
 			stageEdits,
+			imageThumbnailError,
 		};
 
 		function useFile() {

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() {

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>