从 Sanity 中查询 GatsbyImage 的图像答案

【问题标题】：Querying images from Sanity for GatsbyImage从 Sanity 中查询 GatsbyImage 的图像
【发布时间】：2021-07-06 01:23:51
【问题描述】：

我在使用新的 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 或asset 节点上查询childImageSharp，则会在SanityImage 或SanityImageAsset 字段上告诉我Cannot query field "childImageSharp" 错误。

任何指针都非常感谢！

【问题讨论】：

image 节点中有哪些可用字段？
@FerranBuireu 问题是由于某种原因 GraphQL 没有为我的图像资产返回“childImageSharp”、“fluid”或“fixed”字段。新问题here

标签： graphql gatsby gatsby-image sanity

【解决方案1】：

在最新版本的 Gatsby 和 Sanity 中，情况发生了一些变化。在他们的示例中，您可以看到他们的 getGatsbyImageData 函数直接使用 asset 对象作为参数（而不是像您所指的 gatsby 文档中那样使用 -> image -> 资产）。 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}/>
...

【讨论】：

这不起作用。一方面，您不能在没有子元素的情况下查询asset。令人疯狂的是，这些文档已经过时了！

【解决方案2】：

让理智和盖茨比表现得很好是不同的。我使用的是 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
            }
          }
        }
      }

【讨论】：