Image not displaying when using Graphql and Contentful in Gatsby, Failed prop type: Invalid prop `image` of type `number` expected `object`?

Question

I have been trying to successfully query Contentful through Graphql in order to access and display images within my gatsby project.

My code is as follows:

import * as React from "react"
import { graphql } from "gatsby"
import { GatsbyImage } from "gatsby-plugin-image"


function MainApp( {data} ) {

  return (
    <>  
      {data.allContentfulHeroImage.edges.map(({ node }, index) => <GatsbyImage image={index} {...node.heroImage} alt={``} key={``} />)}
    </>
  )
}

export default MainApp;

export const query = graphql 
`query MyQuery {
  allContentfulHeroImage {
    edges {
      node {
        heroImage {
          fluid (maxWidth: 2000) {
            ...GatsbyContentfulFluid
          }
        }
      }
    }
  }
}`

When running gatsby build, my site compiles fine and even displays the webpage however no image appears to be displayed, instead the space is left empty.

When looking at the console it throws the error message:

**

Warning: Failed prop type: Invalid prop image of type number supplied to GatsbyImage, expected object.

**

I have tried to resolve this issue by searching for other examples of the error message and the only solutions that seem to pertain to childImageSharp?

The solution I'm looking is here:

Gatsby-Image failed prop type

I have tried to alter my query using this method but to no success, I am also skeptical as to whether it will work within my case as childImageSharp isn't listed as a child of my queries when looking through the explorer within http://localhost:8000/___graphql.

Has anyone else ran into this problem and aware of a solution?

Answer 1

You are mixing concepts between Gatsby image versions.

• Your GraphQL query is fetching a v2 image

• Your component is expecting a v3 data

Why? Because the fragment you are using is extracted from the version 2 of Gatsby Image while the new version (version 3) is GatsbyImage component is only available in version 3.

In addition, you are passing a number (index) to image property, which is not what the component is expecting.

Spot the difference between gatsby-image and gatsby-plugin-image.

The solution is quite obvious, use one or another.

Using gatsby-image (v2)

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


function MainApp( {data} ) {

  return (
    <>  
      {data.allContentfulHeroImage.edges.map(({ node }, index) => <Img fluid={node.heroImage.fluid} alt={``} key={``} />)}
    </>
  )
}

export default MainApp;

export const query = graphql 
`query MyQuery {
  allContentfulHeroImage {
    edges {
      node {
        heroImage {
          fluid (maxWidth: 2000) {
            ...GatsbyContentfulFluid
          }
        }
      }
    }
  }
}`

Notice the import Img from "gatsby-image".

Using gatsby-plugin-image (v3)

import * as React from "react"
import { graphql } from "gatsby"
import { GatsbyImage } from "gatsby-plugin-image"


function MainApp( {data} ) {

  return (
    <>  
      {data.allContentfulHeroImage.edges.map(({ node }, index) => <GatsbyImage image={node.heroImage.gatsbyImageData} alt={``} key={``} />)}
    </>
  )
}

export default MainApp;

export const query = graphql 
`query MyQuery {
  allContentfulHeroImage {
    edges {
      node {
        heroImage {
           gatsbyImageData(
             width: 200
             placeholder: BLURRED
             formats: [AUTO, WEBP, AVIF]
           )
          }
        }
      }
    }
  }
}`

As usual, check both queries in the GraphiQL playground (localhost:8000/___graphql).

The availability of both approaches will rely on your installed dependencies. Check the requirements in both scenarios (installed packaged, etc)