Gatsby-image TypeError:未定义的不是对象

Question

当尝试在我的header.js中使用gatsby-image时，我得到了以下错误。

TypeError:未定义不是对象(计算“”props.data.flower“”)

请参阅下面的header.js代码。

import { Link } from "gatsby";
import PropTypes from "prop-types";
import React from "react";
import { graphql } from "gatsby";
import Img from "gatsby-image";

import bklogo from "../images/bk-logo-01.svg";

const Header = props => (
  <nav className="bg-cover-image bg-repeat">
    <div className="text-center sm:w-full relative pin">
      <Img
        fluid={props.data.flower.childImageSharp.fluid}
        class="block mx-auto w-5/6 md:w-1/2"
        alt="Brooke & Kyle"
      />
    </div>

    <div className="flex flex-wrap items-center justify-center max-w-3xl mx-auto px-8 py-0 md:px-8 md:py-3">
      <Link
        to="/"
        className="flex items-center no-underline py-5 text-white w-1/2 sm:w-1/3 md:w-1/6"
      >
        <img src={bklogo} className="" alt="Brook & Kyle Logo" />
      </Link>
    </div>
  </nav>
);

Header.propTypes = {
  siteTitle: PropTypes.string
};

Header.defaultProps = {
  siteTitle: ``
};

export default Header;

export const pageQuery = graphql`
  query {
    flower: file(relativePath: { eq: "flower-top.png" }) {
      childImageSharp {
        fluid(maxWidth: 1000) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`;

我让gatsby-image在我的index.js中工作得很好。只是header.js出了点问题。

谢谢你的帮助。

Answer 1

在非页面组件(不在src/pages/目录中的组件)中，导出的graphql查询将被忽略。您将不得不使用gatsby的StaticQuery。

例如：

import { StaticQuery, graphql } from 'gatsby'

const Header = () => (
  <StaticQuery
    query={graphql`
      query {
        flower: file(relativePath: { eq: "flower-top.png" }) {
          childImageSharp {
            fluid(maxWidth: 1000) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    `}
    render={data => <Img fluid={data.flower.childImageSharp.fluid} />}
  />
)