Question

我们正在使用gatsby-plugin-manifest来生成清单文件并导入我们的网站图标。

但是，当我们构建网站的静态HTML并在服务器上运行此文件时，我们在所有图标/icons/icon-48x48.png?v=0a830f59a4abe247647ea123ff4fc96e'. It looks like our service worker can not resolve the URL of / icons上收到404错误。当我们将图标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/

因为我不想编辑任何服务器配置来解决问题，所以我选择从gatsby-plugin-manifest复制common.js的默认图标定义。 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`,
          },
          ...
        ]
       } ...

盖茨比未加载收藏夹图标

1 个答案: