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.