如何使用 gatsby-plugin-image 插件通过 GraphQL 查询图像

问题描述

您好，我使用 Prismic 作为 Headless CMS，想在 gatsby-plugin-images 插件中查询图像。不幸的是，我没有收到错误消息或其他任何消息，只是无法正常工作。

class Index extends Component {
  render() {
    const {
      data: { homepage },} = this.props
    const image = getimage(homepage.data.gesichter.localFile)
    return (
      <Layout>
        <IndexWrapper id={website.skipNavId} style={{ paddingTop: '2rem',paddingBottom: '2rem' }}>
          <Hero>
            <HeroInner>
              <H1>{homepage.data.title.text}</H1>
              <GatsbyImage image={image} alt={homepage.data.gesichter.alt} />
            </HeroInner>
          </Hero>
        </IndexWrapper>
      </Layout>
    )
  }
}

export default Index

Index.propTypes = {
  data: PropTypes.shape({
    homepage: PropTypes.shape({
      data: PropTypes.shape({
        title: PropTypes.shape({
          text: PropTypes.string.isrequired,}),content: PropTypes.shape({
          html: PropTypes.string.isrequired,gesichter: PropTypes.shape({
          alt: PropTypes.string.isrequired,localFile: PropTypes.shape({
            childImageSharp: PropTypes.shape({
              gatsbyImageData: PropTypes.element.isrequired,}).isrequired,}

export const pageQuery = graphql`
  query IndexQuery {
    homepage: prismicHomepage {
      data {
        title {
          text
        }
        content {
          html
        }
        gesichter {
          alt
          localFile {
            childImageSharp {
              gatsbyImageData(
                width: 200
                placeholder: BLURRED
               
                layout: FULL_WIDTH
              )
            }
          }
        }
      }
    }
  }
`

我认为道具类型 gatsbyImageData: PropTypes.element.isrequired, 有问题，但我没有进一步了解。

有人知道该怎么做吗？

解决方法

您的 localFile 字段可能是 null。根据您的 PropTypes，localFile 字段不是必需的，这可能是您没有看到警告或错误的原因。

您能否确认 gatsby-source-prismic 已配置为在本地下载文件？

您可以通过将其包含在您网站的 gatsby-config.js 文件中来实现：

// In your gatsby-config.js
plugins: [
  {
    resolve: 'gatsby-source-prismic',options: {
      // Along with your other options...

      // Set a function to determine if images are downloaded locally and made
      // available for gatsby-transformer-sharp for use with gatsby-image.
      // The document node,field key (i.e. API ID),and field value are
      // provided to the function,as seen below. This allows you to use
      // different logic for each field if necessary.
      // This defaults to always return false.
      shouldDownloadImage: ({ node,key,value }) => {
        // Return true to download the image or false to skip.
        return true
      },},]

在大多数情况下，该选项可能如下所示：

plugins: [
  {
    resolve: 'gatsby-source-prismic',options: {
      // Along with your other options...
      shouldDownloadImage: () => true,]

使用 gatsby develop 重新启动 Gatsby 开发服务器后，您应该会在 localFile 字段中看到您的图像正在下载和可用。