From 9000e8c0bbbc90030d7e635fe8512ae962c96a96 Mon Sep 17 00:00:00 2001
From: Alexander Onnikov <Alexander.Onnikov@xored.com>
Date: Thu, 26 Sep 2024 15:53:35 +0700
Subject: [PATCH] fix: fallback to name avatar in case of img error (#6729)

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>
---
 .../src/components/AvatarInstance.svelte      | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/plugins/contact-resources/src/components/AvatarInstance.svelte b/plugins/contact-resources/src/components/AvatarInstance.svelte
index d51df9ca01..918f28abbe 100644
--- a/plugins/contact-resources/src/components/AvatarInstance.svelte
+++ b/plugins/contact-resources/src/components/AvatarInstance.svelte
@@ -42,18 +42,25 @@
   }
 
   let fontSize: number = 16
+  let imgError = false
+
+  function handleImgError (): void {
+    imgError = true
+  }
+
+  $: hasImg = url != null && !imgError
 </script>
 
 {#if size === 'full' && !url && displayName && displayName !== ''}
   <div
     bind:this={element}
     class="hulyAvatar-container hulyAvatarSize-{size} {variant}"
-    class:no-img={!url && color}
-    class:bordered={!url && color === undefined}
+    class:no-img={!hasImg && color}
+    class:bordered={!hasImg && color === undefined}
     class:border={bColor !== undefined}
     class:withStatus
     style:--border-color={bColor ?? 'var(--primary-button-default)'}
-    style:background-color={color && !url ? color.icon : 'var(--theme-button-default)'}
+    style:background-color={color && !hasImg ? color.icon : 'var(--theme-button-default)'}
     use:resizeObserver={(element) => {
       fontSize = element.clientWidth * 0.6
     }}
@@ -69,15 +76,15 @@
   <div
     bind:this={element}
     class="hulyAvatar-container hulyAvatarSize-{size} stat {variant}"
-    class:no-img={!url && color}
-    class:bordered={!url && color === undefined}
+    class:no-img={!hasImg && color}
+    class:bordered={!hasImg && color === undefined}
     class:border={bColor !== undefined}
     class:withStatus
     style:--border-color={bColor ?? 'var(--primary-button-default)'}
-    style:background-color={color && !url ? color.icon : 'var(--theme-button-default)'}
+    style:background-color={color && !hasImg ? color.icon : 'var(--theme-button-default)'}
   >
-    {#if url}
-      <img class="hulyAvatarSize-{size} ava-image" src={url} {srcset} alt={''} />
+    {#if url && !imgError}
+      <img class="hulyAvatarSize-{size} ava-image" src={url} {srcset} alt={''} on:error={handleImgError} />
     {:else if displayName && displayName !== ''}
       <div
         class="ava-text"