question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Images render blurred when deploying gatsby site to Github Pages

See original GitHub issue

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. image

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:14 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
gravitypersistscommented, Jul 29, 2020

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.

1reaction
polarathenecommented, Jul 10, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Gatsby Image Not Working - Images Blurry on Deploy or does ...
Problem: I cannot get images to load using gatsby-image in my deployment to github pages - it works on my local machine. If...
Read more >
Gatsby Netlify LFS Source Plugin
One of Gatsby's primary draws is how it handles images with gatsby-plugin-image . Gatsby can also be deployed for free from a git...
Read more >
Starting a technical blog in 2021 - Gatsby + Github Pages ...
I copied the definition shamelessly from the Gatsby's website. ... generate fluid images, add filters, change formats, blur up on load and a ......
Read more >
How I made my portfolio website blazing fast with Gatsby
Gatsby takes care of rendering at build time to the DOM as static HTML, CSS, and JavaScript. Gatsby-image Component is BAE. So now...
Read more >
next/image - Next.js
Note: This page is the API reference for the next/image component. For a feature overview and usage information, please see the Image Component...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found