盖茨比图像插件的getImage返回未定义

Posted 2023-03-08

【中文标题】盖茨比图像插件的getImage返回未定义

【英文标题】：getImage by Gatsby Image plugin returns undefined

【发布时间】：2022-01-19 22:41:15

【问题描述】：

我有我想要多次查询并获取不同尺寸的英雄图像，以便我可以在不同的设备尺寸中使用它。

我的英雄形象在

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 />

【参考方案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.logs 应该可以工作了。

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

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

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