javascript - Gatsby: getImage 返回未定义

getImage 返回未定义,因此我的 GatsbyImage 组件未呈现。

文件结构:

  • src/pages/gallery.js
  • src/images(有 12 张名为 photo-01.jpg、photo-02.jpg、...的照片)

我有以下代码(gallery.js):

import React from "react";
import Layout from "../components/Layout";
import { useStaticQuery, graphql } from "gatsby";
import { GatsbyImage, getImage } from "gatsby-plugin-image";

const Gallery = () => {
  const { gallery } = useStaticQuery(graphql`
    query {
      gallery: allFile(
        filter: {
          extension: { eq: "jpg" }
          absolutePath: { regex: "/images/" }
        }
      ) {
        nodes {
          id
          childImageSharp {
            fluid(maxWidth: 500, maxHeight: 500) {
              ...GatsbyImageSharpFluid_tracedSVG
            }
          }
        }
      }
    }
  `);

  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.fluid)}
                alt="Gallery"
              />
            </div>
          ))}
        </div>
      </div>
    </Layout>
  );
};

export default Gallery;

我有什么错?

回答1

问题是您正在混合 https://www.gatsbyjs.com/plugins/gatsby-image/(从 Gatsby 1 到 Gatsby 2)和 https://www.gatsbyjs.com/plugins/gatsby-plugin-image(从 Gatsby 3 开始) .第一个现在已弃用。

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

另一方面,gatsby-plugin-image 查询 gatsbyImageData(不是 fluidfixed)并且相应的 GatsbyImage (from 'gatsby-plugin-image') 组件接受 image 属性。

在您的情况下,您正在查询 gatsby-plugin-image 组件中应用的 gatsby-image 结构,这就是它返回 undefined 的原因。

检查 https://www.gatsbyjs.com/docs/reference/release-notes/image-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;

仔细检查查询,因为应用 gatsby-plugin-image 时节点和结构可能不同。

注意 https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#getimage 是一个辅助函数,你可能不需要它,考虑直接使用:

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

相似文章

最新文章