Question

我是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

在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提供图片。

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

Answer 1

使用gatsby-plugin-layout插件时，我遇到了同样的问题。该文档尚不清楚，但是使用gatsby-plugin-layout插件时，您无需将页面包装在Layout组件之间。该插件会自动处理此问题。如果您将JSX明确地包装在Layout组件之间，则Layout会呈现两次。

Answer 2

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

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

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

然后在代码中，您可以包含

之类的路径。

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

我认为对于像您的用例这样的徽标，此方法就足够了。但是，如果您始终像这样链接图像，则会丢失很多gatsby的炫酷功能。例如，gatsby可以延迟加载图像或优化文件大小！您可以了解更多here (gatsby official blog)。

gatsbyjs，reactjs-为什么组件渲染两次且图像不出现？

2 个答案: