add error handling for image component (directus#8097)

app/src/displays/image/image.vue

@@ -1,6 +1,13 @@
 <template>
-	<v-icon v-if="imgError" name="" />
-	<img v-else-if="src" :src="src" role="presentation" :alt="value && value.title" :class="{ circle }" />
+	<v-icon v-if="imageError" name="image" />
+	<img
+		v-else-if="src"
+		:src="src"
+		role="presentation"
+		:alt="value && value.title"
+		:class="{ circle }"
+		@error="imageError = true"
+	/>
 	<value-null v-else />
 </template>
 
@@ -29,15 +36,15 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
-		const imgError = ref(false);
+		const imageError = ref(false);
 
 		const src = computed(() => {
 			if (props.value === null) return null;
 			const url = getRootPath() + `assets/${props.value.id}?key=system-small-cover`;
 			return addTokenToURL(url);
 		});
 
-		return { src, imgError };
+		return { src, imageError };
 	},
 });
 </script>