fetch image??
This commit is contained in:
parent
928edeb634
commit
0925c28d5a
|
@ -1,6 +1,5 @@
|
|||
<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"
|
||||
|
@ -10,8 +9,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="!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"/>
|
||||
<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"/>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -62,13 +61,9 @@ const offscreen = computed(() => {
|
|||
}, [_offscreen]);
|
||||
return _offscreen;
|
||||
});
|
||||
let loaded = $ref(false);
|
||||
let canvasWidth = $ref(props.width);
|
||||
let canvasHeight = $ref(props.height);
|
||||
|
||||
function onLoad() {
|
||||
loaded = true;
|
||||
}
|
||||
let url = $ref<string>();
|
||||
|
||||
watch([() => props.width, () => props.height], () => {
|
||||
const ratio = props.width / props.height;
|
||||
|
@ -83,6 +78,20 @@ 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({
|
||||
|
@ -103,7 +112,7 @@ onMounted(() => {
|
|||
} else {
|
||||
// 100ms後に画像の読み込みが完了していなければblurhashを描画する
|
||||
setTimeout(() => {
|
||||
if (!loaded) {
|
||||
if (!url) {
|
||||
draw();
|
||||
}
|
||||
}, 100);
|
||||
|
|
Loading…
Reference in New Issue