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

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

问题在于，当页面呈现时，所有这些图像都直接包含在页面中作为数据 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

import x from "..."您应该将它们放在static文件夹中并直接引用它们，而不是对这些资源使用 Webpack ( )。如果您的 Gatsby 站点没有前缀（即index.js文件由 提供/），那么您可以对路径进行硬编码（例如href="/favicon.png"）。否则，您将需要使用withPrefix在生产中提供前缀。