reactjs - 使用 imageSharp 卡在 Gatsby 中的 GraphQl 查询

Question

我正在尝试将以下背景道具设置为我的 src/images/bird.jpg 目录中的图像。这是我的代码，但我Cannot read property 'id' of undefined从控制台中的 graphQl 查询中得到一个，并且背景道具在 React Inspector 中返回 null，我做错了什么？

/src/pages/index.js

import React from 'react'
import { graphql } from 'gatsby'
import Img from 'gatsby-image'

import Layout from '../components/layout'

const IndexPage = ({ data }) => (
  <Layout>
    <h1>Hi people</h1>
    <p>{data.site.siteMetadata.title}</p>
    <p>{data.site.siteMetadata.desc}</p>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
  </Layout>
)

export default IndexPage

export const query = graphql`
  query SiteMeta {
    site {
      siteMetadata {
        title
        desc
      }
    }
    background: imageSharp(id: { regex: "/bird.jpg/" }) {
      sizes(maxWidth: 1240) {
        ...GatsbyImageSharpSizes
      }
    }
  }
`

标签： reactjsgraphqlgatsby