Images render blurred when deploying gatsby site to Github Pages

[AlFalahTaieb]

Locally, my website works well with gatsby develop, but but as soon as i try to deploy my website to github-pages, images render blurred and sidebar links ar not working and redirecting wrongly. Anyway i want to fix the first issue about Images problem because i have png and gif. but they brook.

[polarathene]

Have you opened the dev tools network tab? What you're likely seeing here is the base64 placeholder graphics. They are a low quality(very small image that is stretched to proper width/height) image that give a glimpse of the image, like a thumbnail/preview, instead of a blank empty space.

The actual image you want to see would then load in through a transition once it's downloaded and ready to display. There's a few cases where that might not happen, such as if it cannot find the image to download(eg it's looking for the file at some path/url, but it's not there or accessible for some reason).

[AlFalahTaieb]

I've been waiting for 2 days the image are still blurry unfortunately.

When i refresh the page this is what i receive

How can i handle the path/url ?

at the moment I'm calling image like that

![image 1](data/image.gif)

[polarathene]

I haven't used markdown with Gatsby, I assume you need a plugin for it, I think I've seen something like a remark plugin or remark-images, something like that. Look for docs and examples to see how others do it. More importantly make sure that the HTML has the correct urls for the images, and that those urls actually have the image content, otherwise if they are 404, then you're missing the images to load, so it won't work at all.

I don't know what is causing that error in your image, I've not encountered it myself, but if it's blocking js/json that your site needs to work, then your site probably won't be working properly...? So hit up google perhaps and look into that or reach out to some gatsby/webdev communities, unless someone chimes in here on this issue to explain it.

You can also provide a link to the site for others to verify the issue, or a reproduction project on github(preferably with a hosted link, such as on netlify) where others can inspect the source code or HTML on website etc.

[AlFalahTaieb]

I'm receiving was blocked due to MIME type (“application/json”) mismatch (X-Content-Type-Options: nosniff).

And couldn't find a way to handle navigation with github pages it works with the first one but after this the path is always wrong ( without suffix pages ) so i get 404

[LekoArts]

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[LekoArts]

Hi!

Since we didn't receive an answer for 7 days or more about the ask of a reproduction I'm going to close this now, as we can't do much to help without a reproduction. If you are able to create a minimal reproduction for this then please do answer here or reopen the issue. Thanks!

[hkair]

This is happening to me also. Not sure what the cause is.

[polarathene]

@hkair Without a reproduction repo and preferably live site, you aren't likely to get any action taken.

[huy-nguyen]

I encountered the same problem and adding the prop loading="eager" to the gatsby-image React element fixed the issue for me.

[gravitypersists]

I am also experiencing this issue - it appears for me that gatsby is non-deterministically sometimes choosing to add a pathPrefix to my image src urls and sometimes not (this is the path prefix for github pages, set in gatsby-config.js).

I haven't been able to reproduce it reliably and I've found running a deploy to github pages several times appears to fix it. Will update if I learn more.

[meghanar121]

Unable to load images https://meghanar121.github.io/gatsby_portfolio/ ,when i inspect it shows : Failed to load resource: the server responded with a status of 404 ()

[polarathene]

Failed to load resource: the server responded with a status of 404 ()

404 is unrelated to Gatsby, the file should be available from the server hosting it at the URL for the resource(image) that is failing.

[polarathene]

@meghanar121 here is an example:

Your build is outputting:

https://meghanar121.github.io/static/18b0d555514bff3cde3d65db2e006d4e/cd427/cover2.jpg

When it should be outputting:

https://meghanar121.github.io/gatsby_portfolio/static/18b0d555514bff3cde3d65db2e006d4e/cd427/cover2.jpg

I don't use Github Pages, so I'm not sure what is going wrong there, it seems that it the build is outputting with the prefixPath just your URLs in the component/HTML is missing the prefix.

https://github.com/meghanar121/gatsby_portfolio/blob/62d5ebdd638de517143b36200ccad9f0655fbf30/gatsby_portfolio/gatsby-config.js#L36

https://github.com/meghanar121/gatsby_portfolio/blob/62d5ebdd638de517143b36200ccad9f0655fbf30/gatsby_portfolio/.github/workflows/main.yml#L17

I assume that Github is deploying that gh-pages branch that has the build files to the repo name, and that's why you're providing a path prefix, so chances are something is wrong in that github pages yaml, doesn't seem like that line is having any effect?

[TSSarath]

I am facing similar issue while deploying the application in kubernetes under Google Cloud. Many resources return 404 when inspected in browser.