Изображения, которые не просматриваются из общей папки запуска в Гэтсби

#node.js #gatsby #netlify

Вопрос:

Я начинающий актер в «Гэтсби». Согласно Гэтсби Татсу, я разработал и создал свое первое приложение в Гэтсби. Также успешно сгенерирована общая папка. Весь предварительный просмотр хорошо отображается в «http://localhost:8000/» как и ожидалось. Но, когда я непосредственно запускаю index.html файл из общей папки, в браузере(с использованием/без локального хоста) это не предварительный просмотр изображений. Кто-нибудь может сказать мне, почему? Любая помощь была бы очень признательна.

Комментарии:

1. Предоставьте свой gatsby-config , чтобы узнать, как вы настроили свою файловую систему

Ответ №1:

В «localhost:8000» предварительный просмотр хорошо отображается с изображениями. Но просто я попытался бежать прямо index.html файл из общей папки. Но это макет без изображений, только визуализация HTML/CSS.

Когда вы получаете доступ localhost:8000 , вы получаете доступ к index.html своему скомпилированному проекту, но вы не можете изолировать этот файл, потому что у вас есть куча связанных ресурсов (JavaScript, изображения, CSS и т. Д.).

При запуске gatsby build вы компилируете и объединяете все свои ресурсы (компоненты React, зависимости сторонних разработчиков, основные зависимости Гэтсби, изображения и их обработка и т. Д.) С помощью webpack. Весь этот пакет, окруженный кодом React, выводится в /public папку.

Из документации:

gatsby build создает версию вашего сайта с готовыми к производству оптимизациями, такими как упаковка конфигурации, данных и кода вашего сайта, а также создание всех статических HTML-страниц, которые в конечном итоге преобразуются в приложение React.

Что вы получаете от успешной сборки?

Когда сборка Gatsby успешно завершена, все, что вам нужно для развертывания сайта, оказывается в public папке в корневой папке сайта. Сборка включает в себя уменьшенные файлы, преобразованные изображения, файлы JSON с информацией и данными для каждой страницы, статический HTML для каждой страницы и многое другое.

Окончательная сборка-это просто статические файлы, поэтому теперь ее можно развернуть.

Вы можете запустить gatsby serve , чтобы проверить вывод из компиляции. Если вы внесете какие-либо новые изменения в исходный код, который хотите просмотреть, вам придется перестроить сайт и запустить gatsby serve его снова.

Таким образом, вы можете запустить index.html файл напрямую, потому что вам будет не хватать некоторых ресурсов, ключей к хорошей работе проекта.

У вас также есть раздел в документах, связанный с развертыванием и размещением, а также некоторые связанные записи в блоге (Развертывание и Размещение соответственно).

gatsby serve , с другой стороны, просто откройте порт в вашем локальном браузере.

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

Вся /public папка.

Комментарии:

1. Спасибо за разъяснение. Это отлично работает при развертывании файлов сайта (общей папки) в корневой папке сайта.

2. Я рад, что ты это понял. Если проблема была решена, пожалуйста, подумайте о принятии/одобрении ответа, чтобы закрыть проблему

Ответ №2:

выполнить: gatsby build или gatsby serve , а затем попробуйте открыть свой веб-сайт после выполнения этой команды. Не волнуйтесь, вы все еще можете работать над ним, как обычно, после выполнения команд сборки или обслуживания.

Комментарии:

1. Спасибо за быстрый ответ. На самом деле я так и сделал gatsby build , а потом gatsby develop в cmd. Он успешно сгенерировал общую папку. В «localhost:8000» предварительный просмотр хорошо отображается с изображениями. Но просто я попытался бежать прямо index.html файл из общей папки. Но это макет без изображений, только визуализация HTML/CSS. Каким файлом мне нужно поделиться/загрузить на сервер, чтобы предоставить другим просмотр/демонстрацию?