Modelviewer 未加载本地文件“不允许加载本地资源”答案

【问题标题】：Modelviewer not loading local file "Not allowed to load local resource"Modelviewer 未加载本地文件“不允许加载本地资源”
【发布时间】：2021-09-01 14:13:41
【问题描述】：

我将 Google 的 ModelViewer 用于 WebAR 项目。

我有一个 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>

网页中没有加载模型，控制台显示如下错误：

不允许加载本地资源：file:///path-to-project/src/assets/models/Astronaut.glb

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

任何帮助将不胜感激。

【问题讨论】：

标签： javascript html vue.js model-viewer

【解决方案1】：

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

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

【讨论】：

非常感谢！！！那行得通！澄清一下：@/assets/models/Astronaut.glb 不起作用，但公用文件夹和 /models/Astronaut.glb 替代方法起作用了。