gatsbyjs，reactjs - 为什么组件会渲染两次且图片不显示？

Question

我是一个新手，正在使用v2版本的gatsbyjs。我的项目中有三个组件 - loader、header和layout。

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开发者工具中检查源代码，发现图片不是通过webpack提供的。

那么，为什么组件会渲染两次，为什么图片无法显示？我错过了什么或做错了什么？

- Valay

---

我认为你应该将图像导入为模块。 - andresmechali

@andresmechali 尝试了但没有成功。gatsby-config有问题，无法提供图片服务。 - Valay

Answer 1

当我使用gatsby-plugin-layout插件时，遇到了同样的问题。文档并不是很清楚，但是当使用gatsby-plugin-layout插件时，你不需要在Layout组件之间包裹你的页面。该插件会自动处理这个问题。如果你明确地在Layout组件之间包裹你的JSX，则Layout会被呈现两次。

- Nicolas Dao

---

救命稻草。犯了同样的错误。现在正常工作了。谢谢。 - Pasindu Dineth Peiris

Answer 2

我不确定为什么你的页面会加载双重组件，你是直接访问网站还是从其他路径进入的？

---

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

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

然后在你的代码中，你可以像这样包含路径

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

---

我认为对于像你的使用情况这样的标志，这种方法已经足够了。不过，如果你总是像这样链接图片，你会错过很多gatsby的很酷的功能。例如，gatsby可以懒加载您的图像或优化文件大小！您可以在这里（gatsby官方博客）了解更多。

- Derek Nguyen