Активы в общедоступном каталоге дают 404 ошибки в приложении Next.js

Я пытался получить значок для моего сайта (использует next.js), чтобы он отображался. Прочитав бесчисленное количество постов и руководств по Stack Overflow, я начинаю разочаровываться. Структура моего проекта и, в частности, публичный каталог выглядит так:

.
├── Dockerfile
├── README.md
├── components
├── next.config.js
├── package-lock.json
├── package.json
├── pages
├── public
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   ├── css
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon.ico
│   ├── mstile-150x150.png
│   ├── safari-pinned-tab.svg
│   └── site.webmanifest
└── utils

Начало моего файла app.js выглядит так:

export default function Layout({ children, page }) {
  return (
    <>
      <Head>
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
        .....
      </Head>

После прохождения руководства по это у меня остались ошибки консоли, которые гласят: GET http://localhost:3000/favicon-32x32.png 404 (Not Found). Я также пытался загрузить значки через файл site.webmanifest, связанный в шапке с <link rel="manifest" href="/site.webmanifest" crossorigin="use-credentials">, но этот тег также оставил ошибку 404 (Not Found) в консоли.

Я проверил, что фавикон png имеет правильный размер: 16x16 и 32x32. Кажется, что какие-либо активы, находящиеся в моем общедоступном каталоге, на которые я пытаюсь ссылаться в <Head>, не найдены.

Есть ли что-нибудь еще, что я могу попробовать, чтобы эти значки отображались?

Обновлено: вот содержимое моего файла next.config.js:

module.exports = {
  basePath: '/my-path',

  webpack: (config) => {
    return config
  },

  env: {
  },

  publicRuntimeConfig: {
    BACKEND_API_URL: ...
    CONSENT_COOKIE_NAME: ...
  },
}

Я думаю, вам нужно что-то разрешить в next-config.js

Ranu Vijay 22.04.2022 23:07

@RanuVijay У меня есть собственная конфигурация веб-пакета, но что нужно добавить сюда, чтобы правильно связать фавикон?

wisenickel 22.04.2022 23:11

Пробовали ли вы чистую сборку, то есть удаление каталога .next перед повторным запуском?

Mark G 22.04.2022 23:23

@MarkG Я только что попробовал это, и мне не повезло. Фавиконы по-прежнему отображаются как не найденные.

wisenickel 22.04.2022 23:30

Проблема, скорее всего, в вашей пользовательской конфигурации веб-пакета, см. это: stackoverflow.com/help/минимально-воспроизводимый-пример

FINDarkside 22.04.2022 23:51

@FINDarkside Я добавил содержимое моего файла next.config.js в исходный пост. Мне не удалось найти в Интернете примеры людей, редактирующих этот файл для поддержки рендеринга статических ресурсов.

wisenickel 23.04.2022 00:27
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
6
57
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

  <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />

Я думаю, что фавикон должен быть в формате ICO. Фавикон должен быть набором из 16х16, 32х32 и 48х48. Если вы используете онлайн-генератор фавиконов, они автоматически устанавливают размер

Спасибо за ваш пост, но я уже пытался включить favicon.ico в <Head>, и это привело к еще одной ошибке 404 (Not Found) в консоли.

wisenickel 22.04.2022 23:13

убедитесь, что файл находится на правильном пути.

Yilmaz 22.04.2022 23:14

Я проверил, что это правильно, но ошибка 404 сохраняется

wisenickel 22.04.2022 23:15

вы можете изменить имя файла: favicon-32x32. это может быть недопустимое имя. или просто найдите изображение .ico и попробуйте его. он должен работать

Yilmaz 22.04.2022 23:18

Одна из моих первых попыток отладки заключалась в том, чтобы просто использовать имеющийся у нас favicon.ico и просто связать его в голове, но это не сработало. @RanuVijay предположил, что мне, возможно, придется разрешить визуализацию активов. Но я не уверен, как это будет выглядеть.

wisenickel 22.04.2022 23:21
Ответ принят как подходящий

Поскольку вы установили basePath на /my-path в своем next.config.js, вам нужно будет включить это и в другие ссылки на пути, например:

<link rel="icon" type="image/png" sizes="32x32" href="/my-path/favicon-32x32.png" />

Другие вопросы по теме