通过 Gatsby 图像插件获取图像 returns 未定义

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 (from Gatsby v2 backward) and 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.logs 应该可以工作了。

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

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

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

通过 Gatsby 图像插件获取图像 returns 未定义

getImage by Gatsby Image plugin returns undefined

gatsby

gatsby-image