从 Sanity for 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
      }
    }
  }
`

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

我的查询如下所示：

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

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

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

如果我尝试在 image 或 [=20] 上查询 childImageSharp，我会收到错误提示 Cannot query field "childImageSharp" 字段 SanityImage 或 SanityImageAsset =]节点。

非常感谢任何指点！

Answer 1

最近版本的 Gatsby 和 Sanity 都发生了一些变化。在他们的示例中，您可以看到他们的 getGatsbyImageData 函数正在使用 asset 对象直接将对象作为参数（而不是像 gatsby 文档中那样使用 -> image -> asset指的是）。在 Gatsby V3 的 GastbyImage 中没有 fluid 或 fixed 的用处。在您的情况下，您可以尝试这样查询：

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

将 return 资产对象发送到理智方法 getGatsbyImageData 应该可行。请注意此方法如何获取 image 参数供您在 GatsbyImage

中使用

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

Answer 2

让 Sanity 和 Gatsby 玩得开心是不同的。我使用的是 Wes Bos Mastering Gatsby 但自从他的视频后 gatsby-image 发生了变化，这就是我如何获得最新的 Gatsby V3 GraphiQL 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
            }
          }
        }
      }

从 Sanity for GatsbyImage 查询图像

Querying images from Sanity for GatsbyImage

graphql

gatsby

sanity

gatsby-image