为什么 gatsby-plugin-image 缺少图像道具？

如何解决为什么 gatsby-plugin-image 缺少图像道具？

我正在努力改进我的图像尺寸，并注意到 gatsby 图像已被弃用，因此我决定尝试使用 gatsby-plugin-image。在像这样的静态图像上：

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

工作正常。但是当处理来自 netlify cms 的图像时，即使我有以下错误Missing image prop：

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

整个文件如下。

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',}}
                            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

解决方法

image 需要是由 gatsby-plugin-sharp 或其他生成正确格式的源插件处理的 GatsbyImageData 类型。

此外，您传递给 GatsbyImage 的道具将不起作用。 StaticImage 需要道具，GatsbyImage 需要将该信息传递给生成图像的清晰查询。例如，

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

,

它们都可以获取 props 但静态图像不能从另一个组件获取传递的 props。没有传递到静态图像。插件的文档列出了哪些道具适用于两者，哪些不是。

可以继承的道具是Dynamic，GatsbyImage。