gatsbyjs, reactjs - why components are rendering twice and images do not appear?

问题

I am new to gatsbyjs and using v2. I've 3 components - loader, header and 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

In index.js

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

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

Every component is being rendered twice as shown in screenshot.

Another issue I am facing with images. All the images are in src/images/ and when I use it as below in header component:

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

The image doesn't show up on a page. I checked Source in chrome developer tools and found that images are not being served via webpack.

So, why components render twice and why image doesn't show up ? what am I missing or doing worng here ?

回答1:

I'm not sure why your page is loading double components, are you coming to the site directly, or from another path?

For your image not showing up, this is why: Everything in your src folder is meant to be dynamic, meaning it won't be served directly. If you want to include image statically, you can create a public folder in your root directory (at the same level with src folder), and put images in there. Anything in this public folder will be served directly. So for example, you can have this structure:

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

Then in your code, you can include the path like

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

I think for a logo like your use case, this method is sufficient. However, if you always link images like this, you'll be missing out a lot of gatsby's cool feature. For example, gatsby can load your image lazily, or optimize the file size! You can learn more here (gatsby official blog).

来源：https://stackoverflow.com/questions/54218749/gatsbyjs-reactjs-why-components-are-rendering-twice-and-images-do-not-appear

标签

reactjs

gatsby