Why is gatsby-plugin-image missing image prop?

user_14667635 0
Viewed 3966

I am working on improving my image sizes and noticed that gatsby image was deprecated so I decided to try on the gatsby-plugin-image. On static images like this:

<StaticImage
 src="../images/image.png"
 alt="software design"
 layout={'fullWidth'}
 formats={['auto', 'webp']}
/>

is working fine. But when working on the images from netlify cms I get that following error Missing image prop even I have following:

<GatsbyImage
  image={refImage}
  alt={refImage}
  layout={'fullWidth'}
  formats={['auto', 'webp']}
/>

The whole file is as follows.

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

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

const ReferenceItem = ({
    slug,
    background,
    category,
    date,
    title,
    description,
    image,
    timeToRead,
}) => {
    const refImage = getImage(image)
    return (
        <S.BlogColumn>
            <article className="post" key={slug}>
                <S.BlogColumn>
                    {image && (
                        <GatsbyImage
                            image={refImage}
                            alt={refImage}
                            layout={'fullWidth'}
                            formats={['auto', 'webp']}
                        />
                        /*                         <img
                                style={{
                                    display: 'block',
                                    width: '100%',
                                    height: 'auto',
                                }}
                                src={`/${image}`}
                                alt={image}
                            /> */
                    )}
                    {!image && (
                        <img
                            style={{
                                display: 'block',
                                width: '100%',
                                height: 'auto',
                            }}
                            src={require('../../../static/assets/img/cover.webp')}
                            alt="cover"
                        />
                    )}
                </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>
    )
}

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

export default ReferenceItem
gatsby-image netlify-cms netlify gatsby reactjs
3 Answers

The image needs to be of type GatsbyImageData as processed by gatsby-plugin-sharp or another source plugin that generates the correct format.

Additionally, the props you're passing to GatsbyImage will not work. StaticImage takes props, GatsbyImage needs that information to be passed to the sharp query that generates the images. For example,

{
   image {
     childImageSharp {
         gatsbyImageData(layout: FULL_WIDTH)
     }
   }
}
user_60307870

They both can take props but Static Image can't get passed props from another component. No passing down to static image. The documentation for the plugin lists which props are for both, and which aren't.

The one that can take the passing down props is Dynamic one, GatsbyImage.

user_134344810

It seems that problem was react native version 0.65 where the `headerTransparent: true makes the button not work properly in android device. And is fixed in the next version.

user_146676350
Related