Failed Prop Type in Gatsby Image

Question

I wanted to inquire about something. I am trying to display staff images, bio, etc.

My query is like so:

const data = useStaticQuery(graphql`
  query {
    allContentfulStaff {
      edges {
        node {
          staffBio {
            staffBio
          }
          staffImages {
            id
            gatsbyImageData
            description
          }
          staffOneLine
        }
      }
    }
  }
`);

My map function is like so:

return (
  <>
    <h1>Our Rockin' Staff</h1>
    {data.allContentfulStaff.edges.map((node, index) => {
      console.log(data.allContentfulStaff);
      return (
        <div>
          <GatsbyImage
            key={``}
            image={node.gatsbyImageData}
            alt={node.description}
          />

          {node.staffOneLine}
        </div>
      );
    })}
  </>
);

I receive the data from {node.staffOneLine }, but nothing for the images. When I console log {data.allContentfulStaff}, I see an array of images that I will attach.

However, I am getting an error which I will also attach… but none of my other queries / functions where I am grabbing images in the same manner are giving me this error and they look relatively similar. I also did not need the image prop in my components as I am using <GatsbyImage />

Curious if you have any ideas?

You also need to call `getImage()` to process the image, not sure if you already have it not. `const image = getImage(item.node.staffImages[0].gatsbyImageData)` — Oliver Heward, Aug 24 '22 at 15:39
`getImage()` is a optional helper function. It's not mandatory since it only shorten the property nesting and its usage relies on the approach. Moreover, if you use it, it should be something like: `const image = getImage(item.node.staffImages[0])` and I guess it won't work since the query lacks of sharps nodes — Ferran Buireu, Aug 25 '22 at 06:03

Ferran Buireu · Answer 1 · 2022-08-25T06:04:25.413

node is an array/set of images as staffImages (of 1 position only) is, so you'll need to add directly to each position like:

<GatsbyImage image={item.node.staffImages[0].gatsbyImageData} alt={ 'staff image' } />

You are looping the data correctly as you pointed out with the console.log() but as you can see there, and because your data structure, staffImages is an array of one position (always) that holds the gatsbyImageData so you need to access directly to that position.

The getImage() function discussed in comments is completely optional and it won't change the fact that an image is showing/not showing at all. As you can see in the docs:

import { getImage } from "gatsby-plugin-image"

const image = getImage(data.avatar)

// This is the same as:

const image = data?.avatar?.childImageSharp?.gatsbyImageData

Failed Prop Type in Gatsby Image

1 Answers1