mirror of
https://github.com/hcengineering/platform.git
synced 2025-05-30 12:20:00 +00:00
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:
parent
d784867e0a
commit
9000e8c0bb
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user