My image is not loading and causing my app to crash

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:

image