gatsby-image-recipe.mdx

Setup Gatsby-image

gatsby-image is a React component specially designed to work seamlessly with Gatsby’s GraphQL queries. It combines Gatsby’s native image processing capabilities with advanced image loading techniques to easily and completely optimize image loading for your sites. gatsby-image uses gatsby-plugin-sharp to power its image transformations.

---

Install necessary NPM packages

---

Install the gatsby-source-filesystem plugin in gatsby-config.js replace path with ""

<GatsbyPlugin name="gatsby-source-filesystem" key="src/pages" options={{ name: src pages directory, path: src/pages, }} />

---

Sweet, now it's ready to go.

Let's also write out an example stylesheet and page you can use to play with gatsby-image.

Read more about gatsby-image in the Gatsby documentation site:

https://www.gatsbyjs.org/packages/gatsby-image/

index.js

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img fixed={data.file.childImageSharp.fixed} />
  </div>
)

export const query = graphql`
  query {
    file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
      childImageSharp {
        # Specify the image processing specifications right in the query.
        # Makes it trivial to update as your page's design changes.
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`