gatsby - Gatsby Image 插件的 getImage 返回 undefined

Question

我有一张主图，我想多次查询并以不同尺寸获取它，以便我可以在不同尺寸的设备上使用它。

我的英雄形象在

src/images/hero.png

这是查询代码:

export const mobileHeroImage = graphql`
  fragment mobileHeroImage on File {
    childImageSharp {
      fluid(maxWidth: 375, maxHeight: 400) {
        ...GatsbyImageSharpFluid
      }
    }
  }
`;

export const query = graphql`
  query {
    mobileHeroImage: file(relativePath: { eq: "hero.png" }) {
      ...mobileHeroImage
    }
  }
`;

这是我在 index.js 中的组件代码:

const IndexPage = ({ data }) => {

  // First console log
  console.log(data);

  // Second console log
  console.log(getImage(data.mobileHeroImage));

首先控制台日志用图像对象记录对象:

第二个控制台日志记录未定义，即使 data 中有 mobileHeroImage 对象也是如此

多维图像将作为数组传递，如下所示:

export function MyImage({ data }) {
  const images = withArtDirection(getImage(data.mobileHeroImage), [
    // I would add more sizes here for different screen sizes
    {
      media: "(max-width: 1024px)",
      image: getImage(data.smallImage),
    },
  ])
  return <GatsbyImage image={images} />
}

Answer 1

您正在混合来自 gatsby-image 的概念(从 Gatsby v2 向后)和 gatsby-plugin-image (从 Gatsby v3 开始)。

在很多东西中，在新版本中，它们被简化为 Img (v2) 和 GatsbyImage (v3)。第一个采用 fluid 或 fixed props 图像数据，就像您在片段中查询的那样 (...GatsbyImageSharpFluid ) 而 GatsbyImage 获取整个 image props 数据。它们的查询方式不同。

此外，getImage 是一个辅助函数，因此它不是强制性的，尽管它可以使您的代码更清晰。事实来自 GatsbyImage (v3)，这就是它在您的代码中返回 undefined 的原因。

---

查看迁移指南以了解更多详细信息:https://www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide/

---

也就是说，您应该根据您的要求选择一个或另一个版本。我建议使用新版本，因为 gatsby-image 目前已弃用(因此请仔细检查并删除已弃用的软件包)。

按照 GatsbyImage 方法，您的查询应该如下所示:

export const mobileHeroImage = graphql`
  fragment mobileHeroImage on File {
     childImageSharp {
       gatsbyImageData(
         width: 200
         placeholder: BLURRED
         formats: [AUTO, WEBP, AVIF]
       )
     }
  }
`;

export const query = graphql`
  query {
    mobileHeroImage: file(relativePath: { eq: "hero.png" }) {
      ...mobileHeroImage
    }
  }
`;

注意:根据需要调整查询选项和参数

现在，您的 console.log 应该可以工作了。

  // First console log
  console.log(data);

  // Second console log
  console.log(getImage(data.mobileHeroImage));

正如我所说，您可以省略 getImage 辅助函数并直接使用 data。