Gatsby: getImage returns undefined

getImage is returning undefined so my GatsbyImage component is not rendered.

File structure:

• src/pages/gallery.js
• src/images (has 12 photos named photo-01.jpg, photo-02.jpg, …)

I have the following code (gallery.js):

import React from "react";
import Layout from "../components/Layout";
import { useStaticQuery, graphql } from "gatsby";
import { GatsbyImage, getImage } from "gatsby-plugin-image";

const Gallery = () => {
  const { gallery } = useStaticQuery(graphql`
    query {
      gallery: allFile(
        filter: {
          extension: { eq: "jpg" }
          absolutePath: { regex: "/images/" }
        }
      ) {
        nodes {
          id
          childImageSharp {
            fluid(maxWidth: 500, maxHeight: 500) {
              ...GatsbyImageSharpFluid_tracedSVG
            }
          }
        }
      }
    }
  `);

  return (
    <Layout>
      <div className="container py-5">
        <div className="row">
          <div className="col-12">
            <h1 className="text-gastby mb-4">Gallery</h1>
          </div>
        </div>
        <div className="row">
          {gallery.nodes.map((image) => (
            <div className="col-lg-3 col-md-4 col-sm-6 mb-3" key={image.id}>
              <GatsbyImage
                image={getImage(image.childImageSharp.fluid)}
                alt="Gallery"
              />
            </div>
          ))}
        </div>
      </div>
    </Layout>
  );
};

export default Gallery;

what can i have wrong?

Answer

The problem is that you are mixing gatsby-image (from Gatsby 1 to Gatsby 2) and gatsby-plugin-image (from Gatsby 3 onwards). The first one is now deprecated.

This can be easily spotted when you query for fluid or fixed GraphQL nodes since they are created by gatsby-image which uses Img (from 'gatsby-image‘) component, which accepts a fluid or fixed property.

On the other hand, gatsby-plugin-image queries for gatsbyImageData (not fluid or fixed) and the corresponding GatsbyImage (from 'gatsby-plugin-image') component accepts an image property.

In your case, you are querying a gatsby-image structure applied in a gatsby-plugin-image component, that’s why it is returning undefined.

Check the migration guide but essentially you will need to replace (and remove) all references to gatsby-image and install the required dependencies:

npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp

Add it to your gatsby-config.js:

module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

And change your query to something like:

const Gallery = () => {
  const { gallery } = useStaticQuery(graphql`
    query {
      gallery: allFile(
        filter: {
          extension: { eq: "jpg" }
          absolutePath: { regex: "/images/" }
        }
      ) {
        nodes {
          id
          childImageSharp {
            gatsbyImageData(layout: FIXED)
          }
        }
      }
    }
  `);

  return (
    <Layout>
      <div className="container py-5">
        <div className="row">
          <div className="col-12">
            <h1 className="text-gastby mb-4">Gallery</h1>
          </div>
        </div>
        <div className="row">
          {gallery.nodes.map((image) => (
            <div className="col-lg-3 col-md-4 col-sm-6 mb-3" key={image.id}>
              <GatsbyImage
                image={getImage(image.childImageSharp)}
                alt="Gallery"
              />
            </div>
          ))}
        </div>
      </div>
    </Layout>
  );
};

export default Gallery;

Double-check the query since the nodes and the structure may be different when applying gatsby-plugin-image.

Note that getImage is a helper function and you may not need it, consider using directly:

  <GatsbyImage
    image={image.childImageSharp.gatsbyImageData}
    alt="Gallery"
  />