盖茨比不加载图标

Question

我们正在使用 gatsby-plugin-manifest 生成我们的清单文件并导入我们的网站图标。一切都在我们的本地开发服务器上正常工作，因为图标已加载。

然而，当我们在我们的服务器上构建我们网站的静态 HTML 和运行这个文件时，我们在所有图标上收到 404 错误：/icons/icon-48x48.png?v=0a830f59a4abe247647ea123ff4fc96e'. It looks like our service worker can not resolve the URL of/icons`。当我们将图标目录移动到 gatsby 的静态目录时，一切正常。

我是否在 gatsby-config.js 文件中遗漏了什么？这是我们用于 gatsby-plugin-manifest.

的部分

resolve: `gatsby-plugin-manifest`,
  options: {
    name: "Keytoe",
    short_name: "Keytoe",
    start_url: "/",
    background_color: "#23e197",
    theme_color: "#23e197",
    // Enables "Add to Homescreen" prompt and disables browser UI (including back button)
    // see https://developers.google.com/web/fundamentals/web-app-manifest/#display
    display: "standalone",
    icon: "src/assets/logo/favicon.png", // This path is relative to the root of the site.
    // An optional attribute which provides support for CORS check.
    // If you do not provide a crossOrigin option, it will skip CORS for manifest.
    // Any invalid keyword or empty string defaults to `anonymous`
    crossOrigin: `use-credentials`,
  },
},

Answer 1

我遇到了同样的问题，幸运的是设法解决了。您运行 Apache 作为您的网络服务器吗？因为这就是我的问题所在。

Apache 有自己的 /icons 目录，建议永远不要将此名称的目录放在您的 Web 项目的根目录中，因为 Apache 会 return 对位于其中的任何文件发出 404您的 /icons 目录。这是博客 post 导致的正确答案： https://electrictoolbox.com/apache-icons-directory/

因为我不想编辑任何服务器配置来解决问题，所以我选择从 common.js 复制 gatsby-plugin-manifest 的默认图标定义。 https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-manifest/src/common.js

并将所有 src: `icons/...` 替换为 src: `favicons/...`。现在我的 Apache 很开心，我也是。

这是我的 gatsby-config.js 的摘录：

      ...
     ,{
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `domain.com`,
        short_name: `domain.com`,
        start_url: `/`,
        background_color: `#ffffff`,
        theme_color: `#1abc9c`,
        display: `minimal-ui`,
        icon: `src/assets/favicon.png`,
        icons: [
          {
            src: `favicons/icon-48x48.png`,
            sizes: `48x48`,
            type: `image/png`,
          },
          {
            src: `favicons/icon-72x72.png`,
            sizes: `72x72`,
            type: `image/png`,
          },
          ...
        ]
       } ...

盖茨比不加载图标

Gatsby not loading favicons

favicon

gatsby