Reactjs 为什么组件渲染两次而图像不出现？

我对

gatsbyjs

和v2都是新手。 我有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

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

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

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

我面临的另一个问题是图像。所有图像都在

src/images/

中，当我在

标题中使用它时，如下所示：

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" />

从“React”导入React
从“盖茨比”导入{Link}
从“/layout.module.css”导入样式
const logo='src/images/logo.png'；
常量头=（{sitetile，menuLinks}）=>(

该图像没有显示在页面上。我在chrome开发者工具中查看了源代码，发现图像没有通过
webpack
提供

所以，为什么组件呈现两次，为什么图像没有显示？我遗漏了什么，或者在这里做了什么？我不确定您的页面为什么要加载双组件，您是直接访问站点还是从其他路径访问


对于未显示的图像，原因如下：
src
文件夹中的所有内容都是动态的，这意味着它不会直接提供服务。如果要静态包含图像，可以在根目录中创建一个
public
文件夹（与
src
文件夹处于同一级别），并将图像放入其中。此
公用
文件夹中的任何内容都将直接提供服务。例如，您可以使用以下结构：

 |-- src
 `-- public
       `-- images
            `-- logo.png

然后在代码中，可以包含如下路径

<img src="/images/logo.png"  alt="logo" />




我认为对于像您的用例这样的徽标，这种方法就足够了。但是，如果您总是这样链接图像，您将错过许多盖茨比的酷功能。例如，盖茨比可以延迟加载您的图像，或者优化文件大小！您可以了解更多信息。
我在使用
盖茨比插件布局时遇到了同样的问题。文档不是很清楚，但是当使用盖茨比插件布局插件时，你不需要在
layout
组件之间包装你的页面。该插件会自动处理这个问题。如果你在
layout
组件之间显式包装你的JSX，
layout
会被渲染两次。
我认为你应该被导入把这张照片当作一张照片module@andresmechali尝试过，但没有成功。盖茨比配置有问题。它不提供图像。救生圈。犯了相同的错误。现在工作正常。谢谢。