javascript - 防止 gatsby 站点在页面更改时重新安装图像

Question

我是初学者，gatsby我的网站标题组件中有一个包含 3 个静态图像的网站。在我创建网站的方式中，标题每次都会呈现，我看到我的静态图像在页面上刷新，这真的很烦人。我正在考虑将我的 gatsby 网站变成一个 SPA，但我想看看是否有更简单的方法来构建我的项目。

我的代码：

Layout.js（每个页面的布局组件）

const Layout = ({ children }) => {

  return (
    <>
      <Header />
      <Navbar />
      <div
        style={{
          margin: `0 auto`,
          maxWidth: 960,
          padding: `0 1.0875rem 1.45rem`,
        }}
      >
        <main>{children}</main>
      </div>
      <Footer />
    </>
  )
}

Index.js（以及我拥有的所有其他页面都是这样创建的）

import Layout from '../components/layout'

export default function Home() {
  return (
    <Layout>
      I am the home !
    </Layout>   
  )
}

Header.js（因为每次更改页面时标题都在布局图像内渲染）

export default function Header() {
  return (
    <header className = "bg-white flex flex-row justify-around items-start p-4">
      
      <div>
        <StaticImage
        src="../images/gatsby-icon.png"
        width={75}
        quality={95}
        formats={["AUTO", "WEBP", "AVIF"]}
        alt="gatsby logo"
        />
      </div>
      
      {/* MAIN LOGO */}
      <div className="mt-12 sm:mt-0">
        <StaticImage
        src="../images/gatsby-icon.png"
        width={200}
        quality={95}
        formats={["AUTO", "WEBP", "AVIF"]}
        alt="gatsby logo"
        />
      </div>
 

      <div>
        <StaticImage
        src="../images/gatsby-icon.png"
        width={75}
        quality={95}
        formats={["AUTO", "WEBP", "AVIF"]}
        alt="gatsby logo"
        />
      </div>
   
    </header>
  )
}

所以我的观点是如何更改 Layout 组件以将 Header 与页面的其余部分隔离，这样 Header 上的图像就不会每次都重新渲染。将 gatsby 网站变成 SPA 是一种解决方案，但我想知道是否有什么我想念的。

标签： javascriptgatsbysingle-page-applicationstatic-site