diff options
| -rw-r--r-- | src/routes/user/[user]/badges/+page.svelte | 24 |
1 files changed, 21 insertions, 3 deletions
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte index 0b7738e1..dc594e86 100644 --- a/src/routes/user/[user]/badges/+page.svelte +++ b/src/routes/user/[user]/badges/+page.svelte @@ -73,6 +73,9 @@ } }); + const fallback = (event: Event, image: string | undefined) => + ((event.target as HTMLImageElement).src = image || ''); + // const awcBadges = (awcResponse: string): AWCBadge[] => { // return Array.from( // new DOMParser().parseFromString(awcResponse, 'text/html').querySelectorAll('.badge-display a') @@ -318,7 +321,12 @@ title={badge.description} use:tooltip > - <img src={cdn(badge.image)} alt={badge.description} loading="lazy" /> + <img + src={cdn(badge.image)} + alt={badge.description} + loading="lazy" + on:error={(e) => fallback(e, badge.image)} + /> </a> {/each} </div> @@ -465,7 +473,12 @@ }${badge.description ? `\n${badge.description}` : ''}`} use:tooltip > - <img src={cdn(badge.image)} alt={badge.description} loading="lazy" /> + <img + src={cdn(badge.image)} + alt={badge.description} + loading="lazy" + on:error={(e) => fallback(e, badge.image)} + /> </a> {:else} <a @@ -477,7 +490,12 @@ }${badge.description ? `\n${badge.description}` : ''}`} use:tooltip > - <img src={cdn(badge.image)} alt={badge.description} loading="lazy" /> + <img + src={cdn(badge.image)} + alt={badge.description} + loading="lazy" + on:error={(e) => fallback(e, badge.image)} + /> </a> {/if} {/each} |