diff options
| author | Fuwn <[email protected]> | 2024-01-22 18:52:10 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-01-22 18:52:10 -0800 |
| commit | 28e55964c5ef61ca541ca60a9fbf17079c640fee (patch) | |
| tree | 413d4d1ed86fc2b5e72886270a79836ce2166270 /src | |
| parent | feat(badges): image cdn (diff) | |
| download | due.moe-28e55964c5ef61ca541ca60a9fbf17079c640fee.tar.xz due.moe-28e55964c5ef61ca541ca60a9fbf17079c640fee.zip | |
feat(badges): image fallback on error
Diffstat (limited to 'src')
| -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} |