reactjs - gatsby-image 获取组件中未定义的道具

Question

我能够在 GraphiQL 中获取图像数据，但无法在组件中工作。请让我知道我哪里出错了。

import React from "react";
import { graphql } from "gatsby";
import Img from "gatsby-image"

export default function Landing({ data }) {
  console.log(data) // undefined
  return (
    <section id="landing" className="d-flex flex-column justify-content-around">
    </section >
  )
}

export const query = graphql`
  {
    img: file(relativePath: {eq: "landing-women.jpg"}){
      childImageSharp{
        fluid{
          src
        }
      }
    }
  }
`;

标签： reactjsgatsby

Answer 1

我认为这与您的组件不在“页面”文件夹中因此不是页面有关。那是对的吗？在组件中使用页面查询将导致数据未定义。

在 gatsby 中，您有页面查询（针对页面）和静态查询（针对组件）