Megan O'Brien
Megan O'Brien

Reputation: 71

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

Upvotes: 5

Views: 2373

Answers (2)

Jun Young Kang
Jun Young Kang

Reputation: 41

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!

Upvotes: 4

Megan O'Brien
Megan O'Brien

Reputation: 71

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.

Upvotes: 2

Related Questions