Gatsby不加载收藏图标

Question

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

然而，当我们构建网站的静态超文本标记语言并在我们的服务器上运行这个文件时，我们在所有的图标上都得到了一个404错误：/icons/icon-48x48.png?v=0a830f59a4abe247647ea123ff4fc96e'. It looks like our service worker can not resolve the URL of/icons`。当我们将图标dir移到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作为您的web服务器？因为这就是我的问题所在。

Apache有自己的/icons目录，建议不要在web项目的根目录下使用此名称的目录，因为Apache将为您的/icons目录中的任何文件返回404。这篇博文引出了正确的答案：https://electrictoolbox.com/apache-icons-directory/

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

并用src: `favicons/...`替换所有的src: `icons/...`。现在我的阿帕奇高兴了，我也高兴了。

下面是我的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`,
          },
          ...
        ]
       } ...