From fb3ff2e5fa2fd0a86a71da40cf4a7258be0d3899 Mon Sep 17 00:00:00 2001
From: Sylvain Marroufin <marroufin.sylvain@gmail.com>
Date: Mon, 14 Mar 2022 16:51:16 +0100
Subject: [PATCH] fix(Avatar): url error handling (#39)

---
 src/runtime/components/elements/Avatar.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/elements/Avatar.vue b/src/runtime/components/elements/Avatar.vue
index 83667f42..3294e2e3 100644
--- a/src/runtime/components/elements/Avatar.vue
+++ b/src/runtime/components/elements/Avatar.vue
@@ -1,6 +1,6 @@
 <template>
   <span :class="wrapperClass">
-    <img v-if="url" :class="avatarClass" :src="url" :alt="alt">
+    <img v-if="url && !error" :class="avatarClass" :src="url" :alt="alt" :onerror="() => onError()">
     <span v-else-if="text || placeholder" :class="placeholderClass">{{ text || placeholder }}</span>
 
     <span v-if="chip" :class="chipClass" />
@@ -102,6 +102,18 @@ const url = computed(() => {
 })
 
 const placeholder = computed(() => {
-  return (props.alt || '').split(' ').map(word => word.charAt(0)).join('').substr(0, 2)
+  return (props.alt || '').split(' ').map(word => word.charAt(0)).join('').substring(0, 2)
 })
+
+const error = ref(false)
+
+watch(() => props.src, () => {
+  if (error.value) {
+    error.value = false
+  }
+})
+
+function onError () {
+  error.value = true
+}
 </script>