盖茨比没有加载网站图标

Posted 2023-02-19

【中文标题】盖茨比没有加载网站图标

【英文标题】：Gatsby not loading favicons

【发布时间】：2020-06-03 14:02:24

【问题描述】：

我们使用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`,
  ,
,

【参考方案1】：

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

Apache 有自己的/icons 目录，建议不要将这个名称的目录放在您的 Web 项目的根目录，因为 Apache 将为位于您的/icons 目录中的任何文件返回 404。这是导致正确答案的博客文章： 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`,
          ,
          ...
        ]
        ...

【讨论】：

是的，这似乎可以解决问题。我尝试重写服务器配置，但是当我们使用 Directadmin 时，这非常困难。所以我听从了你的建议。感谢您的帮助！