From 6a2adcb2cfc707e022f41f39ad3066c2356f0e96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 3 Aug 2026 12:35:07 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20Blurhash=E3=81=AE=E3=82=B5?=
 =?UTF-8?q?=E3=82=A4=E3=82=BA=E7=AE=97=E5=87=BA=E7=94=A8=E3=81=AE=E5=80=A4?=
 =?UTF-8?q?=E3=81=8C=E8=AA=A4=E3=81=A3=E3=81=A6=E3=81=84=E3=81=9F=E5=95=8F?=
 =?UTF-8?q?=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3=20(#17849)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(frontend): Blurhashのサイズ算出用の値が誤っていた問題を修正

* clean up

* Update Changelog
---
 CHANGELOG.md                                           | 2 +-
 packages/frontend/src/components/MkBlurhash.vue        | 5 ++++-
 packages/frontend/src/components/MkImgWithBlurhash.vue | 4 ++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 378598bd8d..99116c2a0e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,7 @@
 -
 
 ### Client
--
+- Fix: 画像の表示時にBlurhashが描画されない場合があるのを修正
 
 ### Server
 - Fix: 既にミュートしているスレッドに対して再度スレッドミュートを作成しようとするとサーバーエラーになる問題を修正
diff --git a/packages/frontend/src/components/MkBlurhash.vue b/packages/frontend/src/components/MkBlurhash.vue
index 5000fe111b..8522ab260e 100644
--- a/packages/frontend/src/components/MkBlurhash.vue
+++ b/packages/frontend/src/components/MkBlurhash.vue
@@ -81,7 +81,10 @@ const bitmapTmp = shallowRef<CanvasImageSource | undefined>();
 
 watch([() => props.width, () => props.height, canvas], () => {
 	const ratio = props.width / props.height;
-	if (ratio > 1) {
+	if (!Number.isFinite(ratio) || ratio <= 0) {
+		canvasWidth.value = 64;
+		canvasHeight.value = 64;
+	} else if (ratio > 1) {
 		canvasWidth.value = Math.round(64 * ratio);
 		canvasHeight.value = 64;
 	} else {
diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue
index 0262e03f3b..d065aa89a1 100644
--- a/packages/frontend/src/components/MkImgWithBlurhash.vue
+++ b/packages/frontend/src/components/MkImgWithBlurhash.vue
@@ -18,8 +18,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			key="canvas"
 			:class="$style.canvas"
 			:blurhash="hash ?? null"
-			:height="imgHeight ?? undefined"
-			:width="imgWidth ?? undefined"
+			:height="props.height"
+			:width="props.width"
 			:onlyAvgColor="props.onlyAvgColor"
 			:show="hide"
 		/>