我正在尝试为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 中，以及在文件名中包含图像哈希(出于缓存原因(。
我怎样才能告诉盖茨比不要将这些图像作为数据URI直接内联到页面中？
与其对这些资源使用 Webpack(import x from "..."(，不如将它们放在static文件夹中并直接引用它们。如果您的 Gatsby 网站没有前缀(即从/提供index.js文件(，那么您可以对路径进行硬编码(例如href="/favicon.png"(。否则，你将需要使用 withPrefix 在生产中提供前缀。
你也可以使用 GraphQL 来实现这一点。例如，如果你在一个名为图像的文件夹中有徽标，你的代码将是这样的：
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-config.js：
module.exports = {
plugins: [
{ resolve: `gatsby-source-filesystem`, options: { path: `${__dirname}/src/images` } },
// other plugins here...
],
}