Utilizing an open-source web-based viewer within a Vue3 application, I have achieved success in displaying the image only upon clicking the "Open Image" button.
Nevertheless, is there anyone who can clarify why two network requests are being made for the same image when the "Open Image" button is triggered?
https://i.sstatic.net/7GLP3.png
Below is my simplified reproduction:
sandbox: https://stackblitz.com/edit/vitejs-vite-xxxk9w?file=src/App.vue
App.vue:
<script setup>
import { ref } from 'vue';
import Viewer from './components/Viewer.vue';
const show = ref(false);
</script>
<template>
<div>
<button type="button" @click="show = true">Open Image</button>
<Viewer v-if="show" />
</div>
</template>
Viewer.vue:
<template>
<div ref="osdContainer" style="width: 500px; height: 500px"></div>
</template>
<script setup>
import OpenSeadragon from 'openseadragon';
import { ref, onMounted } from 'vue';
const viewer = ref(null);
const osdContainer = ref(null);
const initViewer = () => {
console.log('init Viewer');
viewer.value = OpenSeadragon({
element: osdContainer.value,
tileSources: {
type: 'image',
url: 'https://ik.imagekit.io/pixstery/users%2F5cnu6iDlTsa5mujH2sKPsBJ8OKH2%2Fposts%2Fportrait-of-arabian-man_jjC2?alt=media&token=64fb0ae4-b0dc-4ead-b22e-292e55de1447&tr=f-auto,pr-true,q-80',
buildPyramid: false,
},
});
};
onMounted(() => {
console.log('mounting..');
initViewer();
});
</script>