fix(frontend): blurhashが無い場合に何も出力されないのを修正 (misskey-dev#14250)

* fix(frontend): blurhashが無い場合に何も出力されないのを修正 * Update Changelog * Update packages/frontend/src/components/MkImgWithBlurhash.vue Co-authored-by: tamaina <[email protected]> * attempt to fix test * Update packages/frontend/src/components/MkImgWithBlurhash.vue Co-authored-by: tamaina <[email protected]> * attempt to ignore test --------- Co-authored-by: tamaina <[email protected]>
1Step621 · Jul 19, 2024 · 56a43dc · 56a43dc
1 parent 6920f0f
commit 56a43dc
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -45,6 +45,7 @@
 - Fix: Twitchの埋め込みが開けない問題を修正
 - Fix: 子メニューの高さがウィンドウからはみ出ることがある問題を修正
 - Fix: 個人宛てのダイアログ形式のお知らせが即時表示されない問題を修正
+- Fix: 一部の画像がセンシティブ指定されているときに画面に何も表示されないことがあるのを修正
 
 ### Server
 - Feat: レートリミット制限に引っかかったときに`Retry-After`ヘッダーを返すように (#13949)

diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue
@@ -151,22 +151,26 @@ function drawImage(bitmap: CanvasImageSource) {
 }
 
 function drawAvg() {
-	if (!canvas.value || !props.hash) return;
+	if (!canvas.value) return;
+
+	const color = (props.hash != null && extractAvgColorFromBlurhash(props.hash)) || '#888';
 
 	const ctx = canvas.value.getContext('2d');
 	if (!ctx) return;
 
 	// avgColorでお茶をにごす
 	ctx.beginPath();
-	ctx.fillStyle = extractAvgColorFromBlurhash(props.hash) ?? '#888';
+	ctx.fillStyle = color;
 	ctx.fillRect(0, 0, canvasWidth.value, canvasHeight.value);
 }
 
 async function draw() {
-	if (props.hash == null) return;
+	if (import.meta.env.MODE === 'test' && props.hash == null) return;
 
 	drawAvg();
 
+	if (props.hash == null) return;
+
 	if (props.onlyAvgColor) return;
 
 	const work = await canvasPromise;