Gatsby not displaying my image retrieved from GraphQL query

Question

So, this is my problem. Im new to Gatsby and im trying to figure out whats the problem, im getting headache cause of this, cuz it seems not syntactically wrong. I want to display my hero image. I retrieved the source from a GraphQL query and i can even see the image from the preview. I did a console log and the object is existing, even the source.

import React from "react";
import { GatsbyImage } from "gatsby-plugin-image";
import { Link, StaticQueryDocument } from "gatsby";
import { graphql, useStaticQuery } from "gatsby";

export const query: StaticQueryDocument = graphql`
  {
    file(relativePath: { eq: "hero-img.JPG" }) {
      childImageSharp {
        fluid(sizes: "height: 400, width: 400") {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`;

const Hero = () => {
  const {
    file: {
      childImageSharp: { fluid },
    },
  } = useStaticQuery(query);
  console.log(fluid);
  return (
    <header className="hero">
      <div className="section-center hero-center">
        <article className="hero-info"></article>
        <GatsbyImage image={fluid} className="hero-img" alt="hero" />
      </div>
    </header>
  );
};

export default Hero;

The browser threw this error:

react.development.js:220 
        
       Warning: Failed prop type: The prop `src` is marked as required in `Y`, but its value is `undefined`.
    at Y (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-44f85d35.js:615:13)
    at eval (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-44f85d35.js:635:13)
    at MainImage
    at U (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-44f85d35.js:608:13)

This is the result of the query:

{
  "data": {
    "file": {
      "childImageSharp": {
        "fluid": {
          "src": "/static/bc749621e944cd188bc61e9d9f06429f/14b42/hero-img.jpg"
        }
      }
    }
  },
  "extensions": {}
}


{base64: 'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERA…BAAE/EO1ZpcnRj5BXrxFi5QSvrDRKARRL1mvt4MwoAoyp/9k=', aspectRatio: 1, src: '/static/bc749621e944cd188bc61e9d9f06429f/14b42/hero-img.jpg', srcSet: '/static/bc749621e944cd188bc61e9d9f06429f/f836f/her…1e944cd188bc61e9d9f06429f/24a9d/hero-img.jpg 837w', sizes: 'height: 400, width: 400'}
aspectRatio: 1
base64: "data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGQABAAMBAQAAAAAAAAAAAAAAAAMEBQEC/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAcnzPBHV0U65WyD/xAAcEAABBAMBAAAAAAAAAAAAAAABAgMQEgARIRP/2gAIAQEAAQUC3yFkA375Y7DS1U//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/AR//xAAZEAACAwEAAAAAAAAAAAAAAAAAIQEQIDH/2gAIAQEABj8CtD5iD//EABwQAAMAAgMBAAAAAAAAAAAAAAABESFBEDFRYf/aAAgBAQABPyGsCMV+jy0i0hUhX4jThqzsx0f/2gAMAwEAAgADAAAAEJwgff/EABYRAQEBAAAAAAAAAAAAAAAAABABMf/aAAgBAwEBPxAun//EABYRAQEBAAAAAAAAAAAAAAAAABABMf/aAAgBAgEBPxAmH//EABsQAQADAAMBAAAAAAAAAAAAAAEAETEQIZFx/9oACAEBAAE/EO1ZpcnRj5BXrxFi5QSvrDRKARRL1mvt4MwoAoyp/9k="
sizes: "height: 400, width: 400"
src: "/static/bc749621e944cd188bc61e9d9f06429f/14b42/hero-img.jpg"
srcSet: "/static/bc749621e944cd188bc61e9d9f06429f/f836f/hero-img.jpg 200w,\n/static/bc749621e944cd188bc61e9d9f06429f/2244e/hero-img.jpg 400w,\n/static/bc749621e944cd188bc61e9d9f06429f/14b42/hero-img.jpg 800w,\n/static/bc749621e944cd188bc61e9d9f06429f/24a9d/hero-img.jpg 837w"
[[Prototype]]: Object

I expected the browser to show me the image and instead he throwed me this error of undefined src. I tried to use StaticImages instead of GatsbyImage and it didnt work. It only works with the basic img tag, i dunno what to do. Help :/

Answer 1

The problem appears because you are mixing gatsby-image and gatsby-plugin-image structures. The first one works until Gatsby v2 while gatsby-plugin-image should be used from v3 onwards.

Check the migration guide for further details but summarizing, when you are querying a fluid or fixed node you are using the deprecated version (gatsby-image). To fix it:

Install the required dependencies:

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

Add them into your gatsby-config.js:

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

This should create the proper nodes while running gatsby develop or gatsby build. Your GraphQL query should look like this:

import React from "react";
import { GatsbyImage } from "gatsby-plugin-image";
import { Link, StaticQueryDocument } from "gatsby";
import { graphql, useStaticQuery } from "gatsby";

export const query: StaticQueryDocument = graphql`
  {
    file(relativePath: { eq: "hero-img.JPG" }) {
      childImageSharp {
        gatsbyImageData(width: 200)
      }
    }
  }
`;

const Hero = () => {
  const {
    file: {
      childImageSharp: { gatsbyImageData },
    },
  } = useStaticQuery(query);

  return (
    <header className="hero">
      <div className="section-center hero-center">
        <article className="hero-info"></article>
        <GatsbyImage image={gatsbyImageData} className="hero-img" alt="hero" />
      </div>
    </header>
  );
};

export default Hero;

Of course, this can differ from your final query. Double-check it in the GraphiQL playground (localhost:8000/___graphql) but get the idea: instead of querying a fluid node, you are just getting a gatsbyImageData that is the data that needs to be passed in the image props.

Answer 2

This code follows syntax of the last version of the image handeling solution by gatsby, the gatsby-image but Gatsby Image Plugin exposes Methods like StaticImage, GatsbyImage, getImage, withArtDirection to work and query images from graphQL and static souces.

When using StaticImage, options are passed as props to the component, whereas for the GatsbyImage component they are passed to the gatsbyImageData GraphQL resolver. There are examples of how to use gatsbyImageData inside the GraphQL query in here.

const query = graphql`{
    file(relativePath: { eq: "hero-img.JPG" }) {
      childImageSharp {
        gatsbyImageData(layout: FIXED)
      }
    }
  }`

const image = getImage(data.file)
<GatsbyImage 
  image={image} 
  className="hero-img" 
  alt={data.altText} 
/>