Question

我正在尝试在我的apple-touch-icon标签中提供每种head尺寸的图像。我这样做是这样的：

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

问题在于，呈现页面时，所有这些图像都直接作为数据基础（而不是相对url）中的base 64包含在页面中。像这样：

<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...
  ],
}

Gatsby-防止将小图像作为数据URI内联

2 个答案: