为什么 gatsby-plugin-image 缺少 image 属性？

Question

编者注：这个问题可能对大多数搜索

[gatsby-plugin-image] Missing image prop

错误的人没有帮助。作者在下面回答了他自己的问题 https://stackoverflow.com/a/69313485/1120027

---

我正在努力改进我的图像尺寸，并注意到 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',
                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

Answer 1

image

需要是 GatsbyImageData 类型，由

gatsby-plugin-sharp

或其他生成正确格式的源插件处理。

此外，您传递给

GatsbyImage

的道具将不起作用。

StaticImage

需要道具，

GatsbyImage

需要将该信息传递给生成图像的尖锐查询。例如，

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

Answer 2

它们都可以接受道具，但静态图像无法从另一个组件获取传递的道具。不会传递到静态图像。该插件的文档列出了哪些道具适用于两者，哪些道具不适用于两者。

能够继承道具的是Dynamic，GatsbyImage。

Answer 3

问题似乎是反应本机版本

0.65

，其中`headerTransparent：true使按钮在Android设备中无法正常工作。并在下一个版本中修复。