从 Sanity 查询 GatsbyImage 的图像

如何解决从 Sanity 查询 GatsbyImage 的图像

我在使用新的 gatsby-plugin-image 从 Sanity 获取图像时遇到问题。 The documentation 表示执行以下操作：

import React from 'react'
import {getGatsbyImageData} from 'gatsby-source-sanity'
import {GatsbyImage} from 'gatsby-plugin-image'

const Person = ({data}) => {
  const imageData = getGatsbyImageData(data.sanityPerson.profileImage.asset)
  
  return <GatsbyImage image={imageData}/>
}

export default Person

export const query = graphql`
  query PersonQuery {
    sanityPerson {
      profileImage {
        asset
      }
    }
  }
`

但是，当我尝试查询图像资产时，出现以下错误：

我的查询如下所示：

export const query = graphql`
  query MyQuery {
    allSanityAbout {
      nodes {
        about_text
        about_image {
          alt
          image {
            asset
          }
        }
      }
    }
  }
`;

The docs 还说“任何包含图像的 GraphQL 文件对象都将有一个 childImageSharp 字段”，但我不知道如何查询它：

以下是 image 节点内可用的字段：

如果我尝试在 Cannot query field "childImageSharp" 或 SanityImage 上查询 SanityImageAsset，我会收到错误信息，告诉我 childImageSharp 或 image 字段上的 asset节点。

非常感谢任何指点！

解决方法

在 Gatsby 和 Sanity 的最新版本中，情况发生了一些变化。在他们的示例中，您可以看到他们的 getGatsbyImageData 函数使用 asset 对象直接将对象作为参数（而不是使用 -> 图像 -> 资产，就像您引用的 gatsby 文档中那样）。 Gatsby V3 中的 GastbyImage 中没有用于流体或固定。 在您的情况下，您可以尝试这样查询：

export const query = graphql`
  query MyQuery {
    allSanityAbout {
      nodes {
        about_text
        about_image {
          asset
          alt
        }
      }
    }
  }
`;

将返回资产对象发送到健全方法 getGatsbyImageData 应该可以工作。请注意此方法如何获取 image 参数供您在 GatsbyImage 中使用

...
  const imageData = getGatsbyImageData(data.sanityPerson.profileImage.asset)
  return <GatsbyImage image={imageData}/>
...

,

让 Sanity 和 Gatsby 表现得很好是不同的。我使用的是 Wes Bos Mastering Gatsby，但自从他的视频以来 gatsby-image 发生了变化，这就是我获得最新 Gatsby V3 GraphiQL API 的方式，该 API 使用来自 Sanity GraphQL API 的图像

    import React from 'react'
    import { graphql } from 'gatsby'
    import { GatsbyImage,getImage } from 'gatsby-plugin-image'
    
    export default function AboutUsPage({ data }) {
      const { heading,image } = data.aboutUs
      const imagePlaceholder = getImage(image.asset)
    
      return (
        <div>
          <h1>About Us</h1>
          <GatsbyImage image={imagePlaceholder} alt={heading} />
          <p>{heading}</p>
        </div>
      )
    }
    
    export const query = graphql`
      query MyQuery {
        aboutUs: sanityAboutUs {
          heading
          image {
            asset {
              gatsbyImageData
            }
          }
        }
      }