点击按钮时图片发起两次网络请求的原因咨询

在Vue3应用中使用OpenSeadragon开源图片查看器，点击“Open Image”按钮后图片能正常显示，但同一张图片会发起两次网络请求，请求截图如下：

最小复现代码 #

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>

原因分析 #

核心原因是OpenSeadragon在buildPyramid: false的配置下，会先发起一次请求获取图片尺寸信息，再发起一次请求加载实际图片。关闭金字塔构建后，它无法通过瓦片层级数据推断图片的宽高，必须额外请求一次拿到图片元信息，才能正确初始化查看器并加载完整图片。

解决办法 #

有两种方案可以避免重复请求：

1. 手动指定图片尺寸
   在tileSources配置中直接添加图片的实际宽高，这样OpenSeadragon就不需要额外请求获取尺寸：

tileSources: {
  type: 'image',
  url: '你的图片URL',
  buildPyramid: false,
  width: 1920, // 替换为图片真实宽度
  height: 1080  // 替换为图片真实高度
}

2. 开启金字塔构建（推荐大图片场景）
   删除buildPyramid: false配置，让OpenSeadragon自动构建瓦片金字塔。这种模式下它会根据视图层级加载对应瓦片，不会发起额外的尺寸请求，但需要确保服务器支持瓦片访问（前端也可处理，但大图片更建议后端配合）。

内容的提问来源于stack exchange，提问作者redshift