Search code examples
github-pagesgatsbygatsby-image

Gatsby Image Not Working - Images Blurry on Deploy or does not show up at all


Project Description: Using Gatsby to create a portfolio website to showcase my JavaScript projects.

Problem: I cannot get images to load using gatsby-image in my deployment to github pages - it works on my local machine. If I use childImageSharp.fixed it is blurry and if I use childImageSharp.noBase64 the image does not show up at all.

What I have tried: I have tried deleting my public and .cache folders and rebuilding (many times) - didn't work. I have tried using older versions of Gatsby and gatsby-images this didn't work and it seems to break other things. I've tried improving the quality but changing some settings but it didn't work. These are all things I have tried from other StackOverflow posts I've been reading the past couple of days.

*Note: I also tried to not use Gatsby Images and you will see a lot of other data in my query even without Gatsby images I cannot get the images to show up not broken. But using gatsby images it's either blurry or blank as I stated above.

Github repo: https://github.com/mk0b/gatsby-portfolio-site

Live Github Pages Site: https://mk0b.github.io/gatsby-portfolio-site/

**Notes on structure - My graphQL query is in Projects.js and is passing down all the info to Project.js which then uses gatsby image.

Thank you for any help/guidance in advance!!


Solution

  • Someone in one my of my slack communities suggested I try Netlify instead of github pages and the images work with Netlify deploy. So this is not resolved but is no longer pressing.