Using Gatsby Image Plugin

This relates to a previous post Updated To Gatsby v3

Migrating to gatsby-plugin-image seemed pretty easy but there was a bug with the way global is implemented in the plugin which caused other components to break.

📝 Gatsby Image Plugin on Gatsby Documentation

Migrating to Image Plugin

There are a few steps to migrating an existing site to use the plugin.

• add gatsby-plugin-image and remove gatsby-image 📦
• enable gatsby-plugin-image in main gatsby config 📷
• change graphql query in post template for gatsbyImageData
• change graphql query in page template for gatsbyImageData
• import gatsby-plugin-image & replaced Img with GatsbyImage in post component
• import gatsby-plugin-image & replaced Img with GatsbyImage in page component

Fix bug introduced by gatsby-plugin-image

• fix problem with gatsby-plugin-image & webpack 5

Gatsby Image Plugin pull request on github

GraphQL Queries

Changes to the graphql image queries were pretty easy.

image {
  childImageSharp {
-    fluid(maxWidth: 1200) {
-      ...GatsbyImageSharpFluid
-    }
+    gatsbyImageData(layout: FULL_WIDTH)
  }
}

Replacing Img with GatsbyImage

Replace import from gatsby-image with gatsby-plugin-image

-import Img from 'gatsby-image'
+import { GatsbyImage } from 'gatsby-plugin-image'

Replace Img elements with GatsbyImage elements referencing new GraphQL query data.

-<Img fluid={image.childImageSharp.fluid} />
+<GatsbyImage image={image.childImageSharp.gatsbyImageData} />

Fix Bug

After doing all of the above everything seems ok ?
Possibly but if you check the console you may find errors with react components referencing global.

As a workaround define global in gatsby-browser.js.

window.global = window

Everything should now be working, including plugins & components referencing global.

The source for the site is available on github.

equk-gatsby