I deployed my site. The site loads and then presents a black screen. It says the image cannot be found. I have attached the following error code:
The website runs fine when i run npm run dev. However, when I run npm run build the image cannot load.
@briana.p Does the /public/desktop_pc/scene.gltf
file path look correct to you?
I know that you’re working with Vite from your other thread, so to check where your files are being output:
Run your build locally with npm run build
It will log where it’s putting files as part of the build.
You can also go into the dist
folder it creates and see what has been produced.
I presume on Netlify you have your Publish directory set to dist
, so if there is no /public/desktop_pc/scene.gltf
within dist
, then it’s not being deployed to Netlify.
The path looks correct on my end. I have no problem running it on my device when i run npm run dev. However, as soon as i switch to npm run build I get this error. I attached my repo below: https://github.com/BrianaPass/Briana-Pass-Portfolio
@briana.p npm run dev
and npm run build
are not the same thing, most build systems will do different things for each, and refer to files differently, so you shouldn’t assume if something works under dev
that it will work under build
.
Did you try following the instructions I gave to run npm run build
and look into the dist
folder?
It shows immediately that the files aren’t where your paths point.
public
is a special folder for Vite, refer to their Vite’s Static Asset Handling documentation.
Whatever is in it, gets copied to /dist/
, it doesn’t remain at a path of /public/
So things like /public/desktop_pc/
end up as /dist/desktop_pc/
but then when you deploy dist
they end up as /desktop_pc/
on the site: