gatsbyjs，reactjs-为什么组件渲染两次并且图像不出现? [英] gatsbyjs, reactjs - why components are rendering twice and images do not appear?

问题描述

我是gatsbyjs的新用户，并且正在使用v2. 我有3个组件-加载程序，标题和布局.

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

在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.

图像面临的另一个问题.所有图像都在src/images/中，并且当我在header组件中按以下方式使用它时:

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

图像未显示在页面上.我在chrome开发人员工具中检查了Source，发现没有通过webpack提供图片.

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.

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

推荐答案

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

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

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

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

---

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

---

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).

这篇关于gatsbyjs，reactjs-为什么组件渲染两次并且图像不出现?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！