Some images producing 'failed to load resource' error on Netlify build

#1

Apologies in advance if this is an obvious issue but I’ve searched and can’t find a solution.

I have a Netlify site built with Gatsby.

I made a new commit today and the site rebuilt with no problems. However, when I looked at the page it was missing two of the images. Error in the console is:
“Failed to load resource: the server responded with a status of 404”

I did not change any code concerning these images, they always worked fine previously and when I set the site to use a previously working deploy the images still aren’t there.
The images are totally fine in the gatsby dev environment and totally fine when I build and serve the site locally. They’re definitely in the connected git repo.

To make matters even more confusing, I have done a number of builds since this issue arose (as I’ve been changing other, unrelated things) and on one of the builds the images were fine!

The images are displayed using gatsby-image. Not sure if that’s relevant. Other images using the exact same template/equivalent queries are totally fine.

Any idea what’s going on? I’m totally baffled.

2 Likes
#2

I’d be checking whether we built what you intended, by using the site download demonstrated in the screenshot in this article:

Then we’ll know whether to debug the build, or the browse experience.

Also you should probably check out this article for some pro tips on the best gatsby experience in our CI / CDN:

1 Like
#3

I’m having a similar issue as well. I find that uploading the /public folder directly from a local build and serve will preserve all the images, but I would love a solution where I can rely on auto-publishing to update my site instead of needing to log in and upload files every time.

I’ve checked the site download, and those images are not in the build’s static files.

My current site is from an upload from a local build with all images in place: https://jessicagabejar.com/

When deploying, while the images are not built, the “blur” image is built, example: https://pbs.twimg.com/media/D9D0Q1wWkAE0GZK?format=jpg&name=large

A few of these images have been resized and reformatted (from png to jpg) to reduce their sizes.

I clear cache often locally, and since this issue began, on Netlify as well before deploying. Interestingly, which images show up in the build differ from deploy to deploy. Not sure how that happens.

2 Likes
#4

Hi, have you checked your earlier commits before this started happening to see if you updated any of your dependencies? In our build environment all we’re doing is cloning your repo, installing your dependencies, and then running the build command you specify. Your build should be repeatable given the same dependencies and source files.

1 Like
#5

Thanks! This issue started happening after updating Gatsby for the first time in this project. Someone recently opened up a similar issue in the Gatsby repo so I’ll be following that as well! Thank you again.

2 Likes
#6

Hi @JessAbejar, I’ve been experiencing the same issues when updating Gatsby. Can you post a link to the issue in the Gatsby repo? This would be much appreciated!
Also, have you experienced blank pages when the page refreshes after updating?

1 Like
#7

Here it is: https://github.com/gatsbyjs/gatsby/issues/14953

I realized that their error messages are different (I experience 404 messages).

2 Likes
#8

if anything changes, please come back here and let us know so others can benefit!

1 Like
#9

Can confirm setting gatsby to version 2.8.8 in package.json fixed the issue. Hope the fab Gatsby devs fix this soon. Thank you!

“gatsby”: “~2.8.8”,

2 Likes
#10

I’m having this same issue. I have a static html site. Just an index.html file with a css folder, and js folder. All assets are hosted locally through the repo. No outside requests. On my local, it finds all assets. If I drag and drop my site, it finds all assets. If I deploy through the repo, it does not find all assets. None of the assets are being gitignored - and having downloaded the deploy zip file, all assets exist. Since it is an simple html site, I am not specifying any build commands. The default directory I left blank. I also tried setting the default directory to “/” as well as placing them all in a public folder and specifying the “public” default directory – it is still not finding the assets. You can see for yourself.

https://youthful-bhaskara-f616df.netlify.com/ - finds assets - drag and dropped
https://asdfasdfasdf.netlify.com/ - does not find assets - deployed through git repo

#11

We’ll refer you back to the advice on debugging this in this article that should show you what we deployed:

I think if you download a copy of your site, you’ll see that files are not where you expected them to be or are missing entirely.

#12

@fool

This is happening because netlify is changing the file routes from:

https://www.mywebsite.com/img/filler.png

To:

https://www.mywebsite.com/img/44961b6516dc07a8bc41aa2bf2e5a483c00c788e/filler.png

when going through the deployment process, resulting in a 404

I have the first route specified in my code. How could I specify the second route?

This is my code:

.element {
background: url("…/img/filler.png") center center/cover;
}

file structure =

/public
----index.html
----/css
--------main.css
----/img
--------filler.png