5

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!!

Megan O'Brien
  • 71
  • 6
  • What is the size of the image width and height props you are passing in? That could be reason why it is blurry because the image is rendered small. – Theorder Mar 18 '20 at 22:35
  • @Aquasar I just saw this! I don't remember what the sizes were but I had tried to alter them because of some threads I was reading and it didn't help. – Megan O'Brien Apr 06 '20 at 20:00
  • Does this answer your question? [Gatsby, "gatsby--image" not showing image when project is "build" but showing properly while in development](https://stackoverflow.com/questions/57826664/gatsby-gatsby-image-not-showing-image-when-project-is-build-but-showing-pr) – Nick Grealy Aug 06 '23 at 14:56

2 Answers2

4

For github pages, you need to specify the public path separately.

gatsby-config.js

pathPrefix: '/gatsby-portfolio-site',

package.json

"build": "gatsby build --prefix-paths",

Good Luck!

Jun Young Kang
  • 41
  • 2
2

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.

Megan O'Brien
  • 71
  • 6