graphql - 从 Sanity 查询 GatsbyImage 的图像

Question

我在使用新的 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
      }
    }
  }
`

但是，当我尝试查询图像 Assets 时，出现以下错误:

我的查询如下所示:

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节点。
任何指针都非常感谢!

Answer 1

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

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

将返回 Assets 对象发送到健全方法 getGatsbyImageData应该管用。请注意此方法如何获得 image供您在 GatsbyImage 中使用的参数

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