grain.social is a photo sharing platform built on atproto.
grain.social
atproto
photography
appview
fix: fallback to initials when avatar image fails to load
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
+4
-2
+4
-2
app/lib/components/atoms/Avatar.svelte
+4
-2
app/lib/components/atoms/Avatar.svelte
···
21
21
22
22
const url = $derived(src || blobUrl(did, blob))
23
23
const fallback = $derived(name?.[0]?.toUpperCase() || initials(did))
24
+
let imgError = $state(false)
25
+
$effect(() => { void url; imgError = false })
24
26
const innerSize = $derived(hasStory ? size - 6 : size)
25
27
const fontSize = $derived(Math.round(innerSize * 0.35))
26
28
</script>
27
29
28
30
{#snippet avatarContent()}
29
-
{#if url}
30
-
<img src={url} alt="" class="avatar" style="width:{innerSize}px;height:{innerSize}px;" loading="lazy" />
31
+
{#if url && !imgError}
32
+
<img src={url} alt="" class="avatar" style="width:{innerSize}px;height:{innerSize}px;" loading="lazy" onerror={() => (imgError = true)} />
31
33
{:else}
32
34
<div class="avatar fallback" style="width:{innerSize}px;height:{innerSize}px;font-size:{fontSize}px;">{fallback}</div>
33
35
{/if}