From b19e4d290c706bcf1f32fc48afe1454fdbb43e2c Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 6 May 2023 16:30:51 +0000
Subject: [PATCH] Revert "fetch image??"

This reverts commit 0925c28d5a4f328264c39d5591dc736795541683.
---
 .../src/components/MkImgWithBlurhash.vue      | 27 +++++++------------
 1 file changed, 9 insertions(+), 18 deletions(-)

diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue
index ebca855ed0..22619ba2fd 100644
--- a/packages/frontend/src/components/MkImgWithBlurhash.vue
+++ b/packages/frontend/src/components/MkImgWithBlurhash.vue
@@ -1,5 +1,6 @@
 <template>
 <div :class="[$style.root, { [$style.cover]: cover }]" :title="title ?? ''">
+	<img v-if="!loaded && src" :class="$style.loader" :src="src" @load="onLoad"/>
 	<Transition
 		mode="in-out"
 		:enter-active-class="defaultStore.state.animation && (props.transition?.enterActiveClass ?? $style['transition_toggle_enterActive']) || undefined"
@@ -9,8 +10,8 @@
 		:enter-to-class="defaultStore.state.animation && (props.transition?.enterToClass ?? $style['transition_toggle_enterTo']) || undefined"
 		:leave-from-class="defaultStore.state.animation && (props.transition?.leaveFromClass ?? $style['transition_toggle_leaveFrom']) || undefined"
 	>
-		<canvas v-if="!url || forceBlurhash" ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined"/>
-		<img v-else :class="$style.img" :width="props.width" :height="props.height" :src="url" :title="title ?? undefined" :alt="alt ?? undefined" loading="eager"/>
+		<canvas v-if="!loaded || forceBlurhash" ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined"/>
+		<img v-else :class="$style.img" :width="props.width" :height="props.height" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined"/>
 	</Transition>
 </div>
 </template>
@@ -61,9 +62,13 @@ const offscreen = computed(() => {
 	}, [_offscreen]);
 	return _offscreen;
 });
+let loaded = $ref(false);
 let canvasWidth = $ref(props.width);
 let canvasHeight = $ref(props.height);
-let url = $ref<string>();
+
+function onLoad() {
+	loaded = true;
+}
 
 watch([() => props.width, () => props.height], () => {
 	const ratio = props.width / props.height;
@@ -78,20 +83,6 @@ watch([() => props.width, () => props.height], () => {
 	immediate: true,
 });
 
-watch([() => props.src], () => {
-	if (url) {
-		URL.revokeObjectURL(url);
-		url = undefined;
-	}
-	if (props.src) {
-		fetch(props.src, { mode: 'no-cors' })
-			.then((res) => res.blob())
-			.then((blob) => {
-				url = URL.createObjectURL(blob);
-			});
-	}
-}, { immediate: true });
-
 function draw() {
 	if (props.hash == null || !offscreen.value) return;
 	worker.postMessage({
@@ -112,7 +103,7 @@ onMounted(() => {
 	} else {
 		// 100ms後に画像の読み込みが完了していなければblurhashを描画する
 		setTimeout(() => {
-			if (!url) {
+			if (!loaded) {
 				draw();
 			}
 		}, 100);