fix: fallback to name avatar in case of img error (#6729)

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>
This commit is contained in:
Alexander Onnikov 2024-09-26 15:53:35 +07:00 committed by GitHub
parent d784867e0a
commit 9000e8c0bb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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"