Chrome console shows resource not found 404

Hi, my site is deployed at:

The error I am facing with multiple images in the chrome console is:

My deploy log is successful with no issues.

When I deploy the site locally I can see all the images being rendered perfectly.
All the images are uploaded to github also, I double-checked. They are rendering there also.

Once deployed on netlify, the images aren’t loading on the domain.
I downloaded the deployed build from netlify and tried to run it locally on my laptop. I am facing the same error here too, even though the images are present where they should be.

Can we check your repo?

@kiran_stone I know you checked that the images are in the correct places, but this still looks to be an issue with incorrect paths. You might want to double-check that the image paths match the link paths.


Your images are located at and not, notice that I removed company-website from the URL.

Asset handling for static websites can be cumbersome from time to time, as your local developer server handles them differently then the final build. Make sure you use the correct paths :slight_smile:

1 Like

I just noticed that, thank you so much. Fixed the issue.



I’m having a similar problem. Most of the images are working on the site: except for a texture that I am using in a Three JS file. The image is loading locally but not in production:

I understand there is a path error but not sure what to change in order for the image to load.

The site is built with VueJs, Three JS, Vite, and TailwindCSS.

This is the reference to the image in the Three JS file.

Hi, @jaykhan-dev. I would recommend downloading the deploy to see what files exist and what their paths are.

You are referencing the file about as this path:


However, that is not the path of the deployed file. The file’s actual path (in the current production deploy) is this:


Your site javascript must reference the file at its deployed path, not the path in the repo. The repo isn’t present after the deploy and only the contents of the publish directory are available after the build completes. That is why you must use the path as found in, and relative to the base of, the publish directory.

I also want to point out that adding the hash in the filename (the .098fdbe5 added to the deployed filename) is both not required and not recommended for sites hosted at Netlify. You can put hashes in the filenames if you want to but it definitely isn’t necessary at Netlify because of our automatic fine-grain cache invalidation.

If there are other questions, please let us know.

Hi. I am having the same problem - my images are not loading for my website. It is showing Failed to load resource: the server responded with a status of 404 ().

I have read the solutions to this problem from different people, but none are working for me.

When I run npm run dev in my local machine, the images load.

However, after deploying on netlify with command npm run build, the images doesn’t load.
I downloaded the deploy files, and I see the image folder nowhere. The dist directory created by npm run build doesn’t have the images.

What should I do to load the images?

For context, I am using 3js, and I am loading the images like this in my code:

const moonTexture = new THREE.TextureLoader().load('../images/moon.jpg');
const normalTexture = new THREE.TextureLoader().load('../images/normal.jpg');
const jupiterTexture = new THREE.TextureLoader().load('../images/jupiter.jpg');

Even this image is not loading in html:

    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="../images/nerd.png" />

Help is appreciated :pray:t2:

Hi @TanishSh

Can you share the repository you are deploying from?

@coelmay I added the Github Repo to my original post. Thanks!

Thanks @TanishSh

With the icon, if you change the path to the following, it will work

<link rel="icon" type="image/svg+xml" href="images/nerd.png" />

The ../ is trying to look in the directory above where index.html is and it does not exist so nerd.png is never copied.

With all the other images, they are not loaded in HTML so they referenced in scripts/main.js and are therefore Vite does nothing with them.

To remedy this, create a public directory, and move images inside this. This directory is then copied during the build process to dist. You still need to change the icon path as specified above, and you will also need to change the .load('../images/FILENAME.jpg') paths inside main.js also.


const moonTexture = new THREE.TextureLoader().load('../images/moon.jpg');

change this to

const moonTexture = new THREE.TextureLoader().load('/images/moon.jpg');

Note: this is not a Netlify related issue. npm run build locally produces the same result as it does in Netlify.

1 Like

@coelmay thanks a lot!

I have been struggling with this for quite a bit. Thanks, you have helped me!

The pictures load and everything work fine. Thank you!