Warning: Failed prop type: The prop src is marked as required in Y, but its value is undefined

[Jukez17]

I have been trying to improve images in the website. For example the images coming from netlify cms markdown file that are displayed in the blog list shows normally when using the <img /> tag buy when trying to use the <GatsbyImage /> I can't get the images showing at all. I get following error in the browser console Warning: Failed prop type: The prop `src` is marked as required in `Y`, but its value is `undefined`. Also for some reason I can't see child image sharp or gatsby image data options in the all markdown remark in the graphql explorer at all.

This is my blog post item file where the images are:

import React from 'react'
import PropTypes from 'prop-types'
import { GatsbyImage, StaticImage } from 'gatsby-plugin-image'

import LocalizedLink from '../LocalizedLink'

import * as S from './styled'
import './postitem.css'

const PostItem = ({
    slug,
    date,
    title,
    description,
    image,
    timeToRead,
}) => {
    return (
        <LocalizedLink to={slug}>
            <S.BlogItemWrapper key={slug}>
                <S.BlogColumn>
                    <article className="post" key={slug}>
                        <S.BlogColumn>
                            {image && (
                                <GatsbyImage
                                    className={'blog-img'}
                                    image={`/${image}`}
                                    alt={image}
                                    layout={'fullWidth'}
                                    formats={['auto', 'webp']}
                                />
                                /*                                 <img
                                    className={'blog-img'}
                                    src={`/${image}`}
                                    alt={image}
                                    width={'640'}
                                    height={'340'}
                                /> */
                            )}
                            {!image && (
                                <StaticImage
                                    className={'blog-img'}
                                    src="../../../static/assets/img/cover.webp"
                                    alt="cover"
                                    layout={'fullWidth'}
                                    formats={['auto', 'webp']}
                                />
                                /*                                 <img
                                    className={'blog-img'}
                                    src={require('../../../static/assets/img/cover.webp')}
                                    alt="cover"
                                    width={'640'}
                                    height={'340'}
                                /> */
                            )}
                        </S.BlogColumn>
                        <S.BlogColumn>
                            <div className="post-content">
                                <h2 className="post-title">{title}</h2>
                                <p className="post-item-description">
                                    {description}
                                </p>
                                <span className="post-date">
                                    {date}&nbsp;&nbsp;—&nbsp;
                                </span>
                                <span className="post-words">
                                    {timeToRead} minute read
                                </span>
                            </div>
                        </S.BlogColumn>
                    </article>
                </S.BlogColumn>
            </S.BlogItemWrapper>
        </LocalizedLink>
    )
}

PostItem.propTypes = {
    slug: PropTypes.string.isRequired,
    background: PropTypes.string,
    category: PropTypes.string,
    date: PropTypes.string.isRequired,
    timeToRead: PropTypes.number.isRequired,
    title: PropTypes.string,
    description: PropTypes.string,
}

export default PostItem

and the graphql query for the thing is in the blog list file:

export const query = graphql`
  query BlogList($locale: String!, $dateFormat: String!, $skip: Int!) {
    allMarkdownRemark(
      sort: {fields: frontmatter___date, order: DESC}, 
      filter: { 
        fields: { locale: { eq: $locale } } 
        fileAbsolutePath: {regex: "/(blog)\/.*\\.md$/"}
      }
      limit: 10
      skip: $skip
    ){
      edges {
        node {
          frontmatter {
            title
            description
            category
            background
            image
            date(formatString: $dateFormat)

          }
          timeToRead
          fields {
            locale
            slug
          }
        }
      }
    }
  }
`