From 28e55964c5ef61ca541ca60a9fbf17079c640fee Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Mon, 22 Jan 2024 18:52:10 -0800
Subject: feat(badges): image fallback on error

---
 src/routes/user/[user]/badges/+page.svelte | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

(limited to 'src')

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}
-- 
cgit v1.2.3