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

I'm using Google's ModelViewer for a WebAR project.

I have a vue.js project and I have a component that is loading the model with the <model-viewer> attribute. I'm trying to set the src attribute of the model-viewer to the absolute path of the .glb model in my project folder. (Note: I have to use the absolute path, otherwise it will not load nor display any error).

This is the html code in the vue component:

<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>

The model is not loaded in the web page and the console shows the following error:

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

Loading from the URL provided in the official web's example works fine. I'm sure it's possible to load a local file and display it in ModelViewer, right?.

Any help will be very appreciated.

@/assets/models/Astronaut.glb if you have it inside src folder

But for static assets, better to put it inside public folder like public/models/Astronaut.glb, and then in your component call it just /models/Astronaut.glb