title: gatsbyjs, reactjs - why components are rendering twice and images do not appear?
body: <p>I am new to <code>gatsbyjs</code> and using v2.
  I've 3 components - loader, header and layout.</p>
  <p><code>layout.js</code></p>
  <pre><code>import React from &quot;react&quot;
  import Helmet from 'react-helmet'
  import { StaticQuery, graphql } from 'gatsby'
  import Header from &quot;./header&quot;
  import Loader from &quot;./loader&quot;
  import 'bootstrap/dist/css/bootstrap.min.css'
  import &quot;./layout.module.css&quot;
  
  const Layout = ({ children }) =&gt; (
      &lt;StaticQuery
        query={graphql`
          query SiteTitleQuery {
            site {
              siteMetadata {
                title
                menuLinks {
                  name
                  link
                }
              }
            }
          }
        `}
        render={data =&gt; (
          &lt;React.Fragment&gt;
            &lt;Helmet
              title={'tite'}
              meta={[
                { name: 'description', content: 'Sample' },
                { name: 'keywords', content: 'sample, something' },
              ]}
            &gt;
            &lt;/Helmet&gt;
            &lt;Loader /&gt;
            &lt;Header menuLinks={data.site.siteMetadata.menuLinks} siteTitle={data.site.siteMetadata.title} /&gt;
              &lt;div&gt;{children}&lt;/div&gt;
          &lt;/React.Fragment&gt;
        )}
      /&gt;
    )
  
    export default Layout
  </code></pre>
  <p>In <code>index.js</code></p>
  <pre><code>import React from 'react'
  import Layout from &quot;../components/layout&quot;
  
  export default () =&gt; (
    &lt;Layout&gt; 
    &lt;/Layout&gt;
  )
  </code></pre>
  <p>Every component is being rendered twice as shown in screenshot.</p>
  <p><a href="https://i.stack.imgur.com/G9dVp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G9dVp.png" alt="enter image description here" /></a></p>
  <p>Another issue I am facing with images. All the images are in <code>src/images/</code> and when I use it as below in <code>header</code> component:</p>
  <pre><code>import React from &quot;react&quot;
  import { Link } from 'gatsby'
  import styles from &quot;./layout.module.css&quot;
  
  const logo = 'src/images/logo.png';
  
  const Header = ({ siteTitle, menuLinks }) =&gt; (
    &lt;header className={styles.header_area}&gt;
      &lt;nav className={`${styles.navbar} navbar-expand-lg ${styles.menu_one} ${styles.menu_four}`}&gt;
          &lt;div className=&quot;container&quot;&gt;
              &lt;a className=&quot;navbar-brand sticky_logo&quot; href=&quot;#&quot;&gt;
                  &lt;img src={logo}  alt=&quot;logo&quot; /&gt;
  </code></pre>
  <p>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 <code>webpack</code>.</p>
  <p>So, <strong>why components render twice and why image doesn't show up ? what am I missing or doing worng here ?</strong></p>