Гэтсби не загружает иконки - PullRequest
Новая
       30

Гэтсби не загружает иконки

0 голосов
/ 19 февраля 2020

Мы используем gatsby-plugin-manifest для создания наших файлов манифеста и импорта наших значков. На нашем локальном сервере разработки все работает нормально, так как загружаются значки.

Однако, когда мы собираем данные нашего сайта и запускаем этот файл на нашем сервере, мы получаем Ошибка 404 на всех значках: /icons/icon-48x48.png?v=0a830f59a4abe247647ea123ff4fc96e'. It looks like our service worker can not resolve the URL of / icons`. Когда мы перемещаем каталог dir в каталог stati c 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 Ответ

2 голосов
/ 25 марта 2020

У меня были такие же проблемы, и, к счастью, мне удалось это понять. Вы используете Apache в качестве веб-сервера? Потому что именно отсюда и возникла моя проблема.

Apache имеет собственный каталог /icons, и рекомендуется никогда не размещать каталог с таким именем в root вашего веб-проекта, поскольку Apache вернет 404 для любого файла, который находится в вашем каталоге /icons. Это сообщение в блоге привело к правильному ответу: 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`,
          },
          ...
        ]
       } ...
...