Gatsby TypeError:无法读取属性'；childImageSharp'；空的

我试图使用盖茨比图像，但无法读取null的属性“childImageSharp”。我找不到错误在哪里。Topsection.js是一个under组件。image.jpg位于src/images/images.jpg的内部。仍在获取错误，无法解决它。我已附上所有文件。请帮我解决这个问题

Topsection.js

const TopSection = () => {
  const data = useStaticQuery(graphql`

   {
      featureimg: file(relativePath: { eq: "image.jpg" }) {
        childImageSharp {
          fluid(maxWidth: 60) {
            ...GatsbyImageSharpFluid
          }
        }
      }
     
    }
    
  `);
  

    return (
      
        <>
  <div className="first-post-thumbnail">
                    <a href="/best-keyboard-for-wow/">
                      
                        <Image fluid={data.featureimg.childImageSharp.fluid} />
                    
                    </a>
                  </div>

   </>
    );
};

export default TopSection;

---

假设您已经正确设置了文件系统，并且GraphQL可以使用映像

尝试：

检查GraphQL游乐场中的查询（

localhost:8000/\uuuuuu GraphQL

）以检查拼写和结果。

对我来说是成功的（除了删除package-lock.json并重新运行npm安装）：

---

gatsby clean

清理项目并重新运行“npm安装”工程

然后

---

你能再检查一下这个问题吗，我已经添加了配置文件。在graphql上，我得到的错误是：“消息”：“未知片段\”GatsbyImageSharpFluid \“，不。它给了我一个错误。未知片段gatsbyimagesharpfluid是否有名为

image.jpg

的图像？尝试删除片段并尝试获取图像的路径或其他参数，设置查询后，添加片段。然后您的相对路径应为

/images/image.jpg

。我已经更新了答案。正如我所说的，在直接使用片段检查路径之前，尝试检索图像的其他字段。如果可以从图像中检索其他字段，则查询将是正确的。

35 | <div className="first-post-thumbnail">
  36 |   <a href="/best-keyboard-for-wow/">
  37 |     
> 38 |       <Image fluid={data.featureimg.childImageSharp.fluid} />
     | ^  39 |   
  40 |   </a>
  41 | </div>

/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.com/docs/gatsby-config/
 */

module.exports = {
  /* Your site config here */
  siteMetadata: {
    title: ``,
    description: ``,
    author: ``,
  },
  plugins: [
  `gatsby-plugin-react-helmet`,
  `gatsby-transformer-sharp`, `gatsby-plugin-sharp`,

  
  {

    
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },

    resolve: `gatsby-plugin-prefetch-google-fonts`,
    options: {
      fonts: [
        {
          family: `Poppins`,
          variants: [`200`,`300`,`400`,`500`,`600`,`700`, `900`]
        },
      ],
    },

    
  },
],
}

import Img from "gatsby-image"
// other imports

const TopSection = () => {
  const data = useStaticQuery(graphql`
      query {
          featureimg: file(relativePath: { eq: "/images/image.jpg" }) {
              childImageSharp {
                  fluid(maxWidth: 60) {
                      ...GatsbyImageSharpFluid
                  }
              }
          }
      }
  `);

  return <div className="first-post-thumbnail">
    <a href="/best-keyboard-for-wow/">
      <Img fluid={data.featureimg.childImageSharp.fluid} />
    </a>
  </div>;
};

export default TopSection;

    <Link to="/best-keyboard-for-wow/">

npm run clean

npm install