From d049b26825385fca8a887fc6645459e2264485ab Mon Sep 17 00:00:00 2001 From: InfinityPacer <160988576+InfinityPacer@users.noreply.github.com> Date: Sat, 25 Jan 2025 03:07:14 +0800 Subject: [PATCH] fix(LibraryCard): handle image loading errors with gradient --- src/components/cards/LibraryCard.vue | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/cards/LibraryCard.vue b/src/components/cards/LibraryCard.vue index 11b4a4a3..4ad5dd9e 100644 --- a/src/components/cards/LibraryCard.vue +++ b/src/components/cards/LibraryCard.vue @@ -91,7 +91,17 @@ async function drawImages(imageList: string[]) { const img = new Image() img.setAttribute('crossorigin', 'anonymous') img.src = imgSrc - await new Promise(resolve => (img.onload = resolve)) + try { + await new Promise((resolve, reject) => { + img.onload = () => resolve() + img.onerror = () => reject(new Error(`Failed to load image: ${imgSrc}`)) + }) + } catch (error) { + console.error(error) + ctx.fillStyle = '#e5e7eb' + ctx.fillRect(MARGIN_WIDTH * index + POSTER_WIDTH * (index - 1), MARGIN_HEIGHT, POSTER_WIDTH, POSTER_HEIGHT) + return + } const x = MARGIN_WIDTH * index + POSTER_WIDTH * (index - 1) const y = MARGIN_HEIGHT