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

Question

编者注：这个问题可能对大多数搜索错误的人没有帮助[gatsby-plugin-image] Missing image prop。作者在下面回答了他自己的问题\n /sf/answers/4851943981/

\n

---

\n

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

\n

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

\n

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

\n

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

\n

整个文件如下。

\n

import React from \'react\'\nimport PropTypes from \'prop-types\'\nimport { GatsbyImage, getImage } from \'gatsby-plugin-image\'\n\nimport * as S from \'./styled\'\nimport \'./postitem.css\'\n\nconst ReferenceItem = ({\n  slug,\n  background,\n  category,\n  date,\n  title,\n  description,\n  image,\n  timeToRead,\n}) => {\n  const refImage = getImage(image)\n  return (\n    <S.BlogColumn>\n      <article className="post" key={slug}>\n        <S.BlogColumn>\n          {image && (\n            <GatsbyImage\n              image={refImage}\n              alt={refImage}\n              layout={\'fullWidth\'}\n              formats={[\'auto\', \'webp\']}\n            />\n            /* <img\n                 style={{\n                   display: \'block\',\n                   width: \'100%\',\n                   height: \'auto\',\n                 }}\n                 src={`/${image}`}\n                 alt={image}\n            /> */\n          )}\n          {!image && (\n            <img\n              style={{\n                display: \'block\',\n                width: \'100%\',\n                height: \'auto\',\n              }}\n              src={require(\'../../../static/assets/img/cover.webp\')}\n              alt="cover"\n            />\n          )}\n        </S.BlogColumn>\n        <S.BlogColumn>\n          <div className="post-content">\n            <h2 className="post-title">{title}</h2>\n            <p className="post-item-description">{description}</p>\n            <span className="post-date">\n              {date}&nbsp;&nbsp;\xe2\x80\x94&nbsp;\n            </span>\n            <span className="post-words">\n              {timeToRead} minute read\n            </span>\n          </div>\n        </S.BlogColumn>\n      </article>\n    </S.BlogColumn>\n  )\n}\n\nReferenceItem.propTypes = {\n  slug: PropTypes.string.isRequired,\n  background: PropTypes.string,\n  category: PropTypes.string,\n  date: PropTypes.string.isRequired,\n  timeToRead: PropTypes.number.isRequired,\n  title: PropTypes.string.isRequired,\n  description: PropTypes.string,\n}\n\nexport default ReferenceItem\n

\n

Answer 1

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

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

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