Javascript gatsby ：getImage 返回未定义

问题是你混合了gatsby-image(从 gatsby 1到 gatsby 2)和gatsby-plugin-image(从 gatsby 3开始).第一个现在已被弃用.

当您查询fluid或fixed个GraphQL node 时，很容易发现这一点，因为它们是由gatsby-image创建的，gatsby-image使用Img(from 'gatsby-image’)组件，该组件接受fluid或fixed属性.

另一方面，gatsby-plugin-image个gatsbyImageData(不是fluid或fixed)查询和相应的GatsbyImage(from 'gatsby-plugin-image')组件接受image属性.

在您的示例中，您正在查询应用于gatsby-plugin-image组件的gatsby-image struct ，这就是为什么它返回未定义的.

判断migration guide，但实际上您需要替换(并删除)对gatsby-image的所有引用，并安装所需的依赖项:

npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp

将其添加到您的gatsby-config.js:

module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

并将查询更改为类似以下内容:

const Gallery = () => {
  const { gallery } = useStaticQuery(graphql`
    query {
      gallery: allFile(
        filter: {
          extension: { eq: "jpg" }
          absolutePath: { regex: "/images/" }
        }
      ) {
        nodes {
          id
          childImageSharp {
            gatsbyImageData(layout: FIXED)
          }
        }
      }
    }
  `);

  return (
    <Layout>
      <div className="container py-5">
        <div className="row">
          <div className="col-12">
            <h1 className="text-gastby mb-4">Gallery</h1>
          </div>
        </div>
        <div className="row">
          {gallery.nodes.map((image) => (
            <div className="col-lg-3 col-md-4 col-sm-6 mb-3" key={image.id}>
              <GatsbyImage
                image={getImage(image.childImageSharp)}
                alt="Gallery"
              />
            </div>
          ))}
        </div>
      </div>
    </Layout>
  );
};

export default Gallery;

Double-check the query since the nodes and the structure may be different when applying 100.

请注意，getImage是一个助手函数，您可能不需要它，请考虑直接使用:

  <GatsbyImage
    image={image.childImageSharp.gatsbyImageData}
    alt="Gallery"
  />