[gatsby-plugin-image] Missing image prop

[boilemmashem]

Seeing the console error [gatsby-plugin-image] Missing image prop, and in the browser console Warning: Failed prop type: The prop imageis marked as required inGatsbyImage, but its value is undefined...`

import React from "react"
import { Link, graphql } from "gatsby"
import styled from "styled-components"
import { GatsbyImage, getImage } from "gatsby-plugin-image" 


export default class BlogList extends React.Component {
  render() {
    const posts = this.props.data.allMarkdownRemark.edges    

    return (
      <React.Fragment>
          {posts.map(({ node }) => {
          const title = node.frontmatter.title || node.fields.slug
          const summary = node.frontmatter.summary || node.excerpt
          const image = getImage(node.frontmatter.image)

          return (
            <div key={node.fields.slug} >
                <Link to={ "/blog" + node.fields.slug }><h3>{ title }</h3></Link>
                <div className="postmeta">
                    <span>Posted { node.frontmatter.date }</span>
                    <span>by { node.frontmatter.author }</span>
                    <span>{ node.fields.readingTime.text }</span>
                </div>
                { summary }
                <GatsbyImage image={ image } alt="test" />
            </div>
          )
          })}
      </React.Fragment>
    )
  }
}

export const blogListQuery = graphql`
  query blogListQuery($skip: Int!, $limit: Int!) {
    allMarkdownRemark(
      sort: { fields: [frontmatter___date], order: DESC }
      limit: $limit
      skip: $skip
    ) {
      edges {
        node {
          fields {
            slug
            readingTime {
              text
            }
          }
          frontmatter {
            date(fromNow: true)
            title
            author
            summary
            image {
              childImageSharp {
                gatsbyImageData(
                  width: 200
                  placeholder: BLURRED
                  formats: [AUTO]
                )
              }
            }
          }
          excerpt (
              format: PLAIN
              pruneLength: 100
              truncate: false
          )
        }
      }
    }
  }
`

console.log(image)
// Outputs
{
  "layout": "constrained",
  "placeholder": {
    "fallback": "data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAeABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIDAQT/xAAXAQADAQAAAAAAAAAAAAAAAAAAAgME/9oADAMBAAIQAxAAAAHvEnjvYBSG61FYUm3/xAAaEAADAQEBAQAAAAAAAAAAAAAAAQIREBIx/9oACAEBAAEFAu08Fb5VaT908iWI/8QAFREBAQAAAAAAAAAAAAAAAAAAEEH/2gAIAQMBAT8BKf/EABYRAQEBAAAAAAAAAAAAAAAAABEBEP/aAAgBAgEBPwGRxgZ//8QAFxAAAwEAAAAAAAAAAAAAAAAAEBEgMf/aAAgBAQAGPwKMCr//xAAcEAADAAIDAQAAAAAAAAAAAAAAAREQMSFBYVH/2gAIAQEAAT8hWINRRbcGZr1iibPpx8wgm32iYLRD/9oADAMBAAIAAwAAABBQ5Lz/xAAYEQACAwAAAAAAAAAAAAAAAAAAEQEQIf/aAAgBAwEBPxAQp06//8QAFxEBAQEBAAAAAAAAAAAAAAAAAQARIf/aAAgBAgEBPxBRts8Isb//xAAcEAEAAwADAQEAAAAAAAAAAAABABEhMVFhcZH/2gAIAQEAAT8QESOon3UJ6nBqspbr389jzL0Banhb1GWF6Db7GyKjQn6y5Tpd9jP/2Q=="
  },
  "images": {
    "fallback": {
      "src": "/static/be500baf3a835b366eb0888a8e770519/ad1df/cute-doggy.jpg",
      "srcSet": "/static/be500baf3a835b366eb0888a8e770519/68b0e/cute-doggy.jpg 50w,\n/static/be500baf3a835b366eb0888a8e770519/d6f53/cute-doggy.jpg 100w,\n/static/be500baf3a835b366eb0888a8e770519/ad1df/cute-doggy.jpg 200w,\n/static/be500baf3a835b366eb0888a8e770519/09900/cute-doggy.jpg 400w",
      "sizes": "(min-width: 200px) 200px, 100vw"
    },
    "sources": []
  },
  "width": 200,
  "height": 299
}
undefined
undefined
undefined
[gatsby-plugin-image] Missing image prop
[gatsby-plugin-image] Missing image prop
[gatsby-plugin-image] Missing image prop

I've tried setting const image = getImage(node.frontmatter.image.childImageSharp.gatsbyImageData) as I have seen elsewhere but to no avail.

Something I'm doing wrong here?

[LekoArts]

But your console.log outputs this:

undefined
undefined
undefined
[gatsby-plugin-image] Missing image prop
[gatsby-plugin-image] Missing image prop
[gatsby-plugin-image] Missing image prop

So it means that image is undefined and thus no image can be passed to the image component. You'll need to make sure that every MD file has image in its frontmatter and it's a valid relative path + the image exists (no typo, same capitalization)

[boilemmashem]

Thanks! You are correct
I fixed by writing a condition to check if the markdown frontmatter had an image.

...
const image = getImage(node.frontmatter.image) || null;
...
{ image != null && <GatsbyImage image={ image } alt="test" /> }
...