我是gatsbyjsv2 的新手并正在使用它。我有 3 个组件 - 加载器、标题和布局。

layout.js

import React from "react"
import Helmet from 'react-helmet'
import { StaticQuery, graphql } from 'gatsby'
import Header from "./header"
import Loader from "./loader"
import 'bootstrap/dist/css/bootstrap.min.css'
import "./layout.module.css"

const Layout = ({ children }) => (
    <StaticQuery
      query={graphql`
        query SiteTitleQuery {
          site {
            siteMetadata {
              title
              menuLinks {
                name
                link
              }
            }
          }
        }
      `}
      render={data => (
        <React.Fragment>
          <Helmet
            title={'tite'}
            meta={[
              { name: 'description', content: 'Sample' },
              { name: 'keywords', content: 'sample, something' },
            ]}
          >
          </Helmet>
          <Loader />
          <Header menuLinks={data.site.siteMetadata.menuLinks} siteTitle={data.site.siteMetadata.title} />
            <div>{children}</div>
        </React.Fragment>
      )}
    />
  )

  export default Layout

在 index.js

import React from 'react'
import Layout from "../components/layout"

export default () => (
  <Layout> 
  </Layout>
)

如屏幕截图所示，每个组件都被渲染两次。

我在图像方面面临的另一个问题。所有图像都在src/images/，当我在header组件中如下使用它时：

import React from "react"
import { Link } from 'gatsby'
import styles from "./layout.module.css"

const logo = 'src/images/logo.png';

const Header = ({ siteTitle, menuLinks }) => (
  <header className={styles.header_area}>
    <nav className={`${styles.navbar} navbar-expand-lg ${styles.menu_one} ${styles.menu_four}`}>
        <div className="container">
            <a className="navbar-brand sticky_logo" href="#">
                <img src={logo}  alt="logo" />

图像未显示在页面上。我在 chrome 开发人员工具中检查了 Source，发现图像没有通过webpack.

那么，为什么组件渲染两次，为什么图像不显示？我在这里错过了什么或在做什么？