模型查看器未加载本地文件 "Not allowed to load local resource"

Question

我正在为 WebAR 项目使用 Google 的 ModelViewer。

我有一个 vue.js 项目，我有一个组件正在加载具有 <model-viewer> 属性的模型。我正在尝试将模型查看器的 src 属性设置为我项目中 .glb 模型的 绝对路径文件夹。（注意：我必须使用绝对路径，否则加载不出来，也不会报错）

这是vue组件中的html代码：

<model-viewer
  src="*path-to-project*/src/assets/models/Astronaut.glb"
  alt="A 3D model of an astronaut"
  ar
  ar-modes="webxr scene-viewer quick-look"
  ar-placement="floor"
  environment-image="neutral"
  auto-rotate
  camera-controls
></model-viewer>

模型未加载到网页中，控制台显示以下错误：

Not allowed to load local resource: file:///path-to-project/src/assets/models/Astronaut.glb

从官网示例中提供的URL加载可以正常工作。我确定可以加载本地文件并在 ModelViewer 中显示它，对吧？

任何帮助将不胜感激。

Answer 1

@/assets/models/Astronaut.glb 如果你在 src 文件夹中有它

但对于静态资源，最好将其放在 public 文件夹中，例如 public/models/Astronaut.glb，然后在您的组件中直接调用它 /models/Astronaut.glb

模型查看器未加载本地文件 "Not allowed to load local resource"

Modelviewer not loading local file "Not allowed to load local resource"

html

javascript

vue.js

model-viewer