Gatsby - 防止小圖像作為數據 URI 內聯

Question

我正在嘗試為我的head標簽中的每個apple-touch-icon大小提供圖像。 我這樣做：

// not shown: import all image files: logo57, logo76, etc
<link rel="apple-touch-icon" sizes="57x57" href={logo57} />
<link rel="apple-touch-icon" sizes="76x76" href={logo76} />
<link rel="apple-touch-icon" sizes="120x120" href={logo120} />
<link rel="apple-touch-icon" sizes="152x152" href={logo152} />
<link rel="apple-touch-icon" sizes="167x167" href={logo167} />
<link rel="apple-touch-icon" sizes="180x180" href={logo180} />

問題在於，當頁面呈現時，所有這些圖像都直接包含在頁面中作為數據 URI 中的 base 64，而不是相對 url。 像這樣：

<link rel="apple-touch-icon" sizes="180x180" href="data:image/png;base64,iVBORw0KGgoAAAA....">

這是有問題的，原因有幾個。 一方面，這些圖像僅在漸進式 Web 應用程序場景中需要； 普通桌面瀏覽器不需要它們，但桌面瀏覽器被迫下載所有這些 base 64 塊，從而減慢了頁面加載速度。 其次，即使在 PWA 場景中，每個設備也只需要這些圖像中的一個，而不是全部，因此頁面加載時間也會減慢。

這是對小於 10,000 字節的圖像的記錄優化，因此它們都在這里加載可能是微不足道的差異。 但是，原始 png 的總大小總計約 27kb（轉換為 base 64 后我不知道），如果不需要，我似乎寧願不將這些數據包含在每個頁面中。

我發現我可以將所有圖像移動到 /static 文件夾並使用href="logo57.png"引用它們，但隨后我失去了編譯時驗證，這些圖像實際上也存在於給定的 href 中作為在文件名中包含圖像哈希（出於緩存原因）。

如何告訴 Gatsby 不要將這些圖像作為數據 URI 直接內聯到頁面中？

Answer 1

與其將 Webpack 用於這些資產（ import x from "..." ），您應該將它們放在static文件夾中並直接引用它們。 如果您的 Gatsby 站點沒有前綴（即index.js文件是從/ ），那么您可以對路徑進行硬編碼（例如href="/favicon.png" ）。 否則，您將需要使用withPrefix在生產中提供前綴。

Answer 2

您也可以為此使用 GraphQL。 例如，如果您在名為 images 的文件夾中有徽標，您的代碼將是這樣的：

const data = useStaticQuery(graphql`
  query Logo {
    file(absolutePath: { regex: "/images/logo.png/" }) {
      publicURL
    }
  }
`)

return <link rel="apple-touch-icon" sizes="57x57" href={data.file.publicURL} />

請注意，您需要使用gatsby-source-filesystem使您的圖像在 GraphQL 中可用。 Gatsby 已經在內部使用了它，因此無需安裝它。 只需將它添加到您的gatsby-config.js ：

module.exports = {
  plugins: [
    { resolve: `gatsby-source-filesystem`, options: { path: `${__dirname}/src/images` } },
    // other plugins here...
  ],
}