Vue3/Nuxt中使用Photo Sphere Viewer加载200状态的360全景图时出现Failed to fetch错误

阿华AIGC实验室

2026-3-30

我完全理解你的困扰——明明图片请求返回了200状态，却还是触发了fetch失败的错误，这种情况在Nuxt里经常和静态资源路径或者组件使用方式有关。先把你的代码整理清楚，再一步步排查解决：

你的组件与使用代码

PhotoSphereViewer组件

<template>
  <div id="viewer"></div>
</template>

<script>
import { Viewer } from '@photo-sphere-viewer/core';
import '@photo-sphere-viewer/core/index.css'

export default {
  name: 'PhotoSphereViewer',
  props: {
    panorama: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      viewer: null
    }
  },
  async mounted() {
    this.viewer = new Viewer({
      container: document.querySelector('#viewer'),
      panorama: this.panorama,
    });
  },
  beforeDestroy() {
    if (this.viewer) {
      this.viewer.destroy();
    }
  }
}
</script>

<style>
#viewer {
  width: 100%;
  height: 400px;
}
</style>

组件调用方式

<div>
  <PhotoSphereViewer panorama="_nuxt/public/images/sphere.jpg" />
</div>

针对性解决方向

1. 修正静态资源路径（最核心的问题）

Nuxt的public目录是静态资源的根目录，编译后资源直接暴露在网站根路径下，不需要带_nuxt/public前缀。你当前写的路径是错误的，这会导致组件请求到错误的资源（哪怕网络返回200，实际内容可能不是你要的全景图）。

修改调用代码：

<PhotoSphereViewer panorama="/images/sphere.jpg" />

这个是我之前遇到过的同款问题，改完路径立刻就好了！

2. 用Vue Refs替代document.querySelector

直接用document.querySelector('#viewer')在多组件实例场景下会有冲突风险，换成Vue的refs更可靠：

修改组件模板：

<template>
  <div ref="viewer"></div>
</template>

修改mounted钩子：

async mounted() {
  this.viewer = new Viewer({
    container: this.$refs.viewer,
    panorama: this.panorama,
  });
}

3. 检查全景图格式是否合规

Photo Sphere Viewer只支持**等距圆柱投影（equirectangular）**的全景图，这类图片的宽高比必须是2:1（比如4000px宽、2000px高）。如果图片格式不对，哪怕请求返回200，组件解析时也会失败，抛出类似fetch的错误。

你可以换一张已知符合格式的测试图验证，或者调整当前图片的尺寸比例。

4. 跨域配置（可选）

如果部署后遇到跨域加载问题，可在Viewer配置中添加跨域参数：

async mounted() {
  this.viewer = new Viewer({
    container: this.$refs.viewer,
    panorama: this.panorama,
    crossOrigin: 'anonymous', // 允许匿名跨域加载
  });
}