Изображения не загружаются при развертывании на страницах Github

Question

Я использую create-react-app для разработки своего приложения реагирования и его развертывания на страницах Github. Мое приложение правильно работает на разработке. Но при развертывании он успешно развертывается, но фоновое изображение не загружается.

загрузка фонового изображения в index.css файле:

body::after {
  background-image: url("/background-img.jpg");
}

Домашняя страница на package.json

{
  "homepage": "http://bigfanjs.github.io/my-repo/",
}

Фоновое изображение в каталоге приложения:

| build
    | background-img.jpg
| src
| public
    | background-img.jpg

А на консоли:

GET https://bigfanjs.github.io/background-img.jpg 404 ()

Наконец, когда я редактирую URL-адрес инструментов разработчика на url(/my-repo/background-img.jpg), он загружается.

Answer 1

Я не знаю, изменилось ли это в последнее время, но я просто решил эту проблему, проверив страницу, где мое изображение находилось в моем репозитории github, и просмотрев свойства реального изображения там.

свойства изображения

Не имело смысла, что вы могли просто поместить URI на всю страницу github, но, очевидно, просто добавив ?raw=true после того, как это сработало.

Использование URI следующим образом: https://github.com/I-keep-trying/demo5/blob/master/src/images/space.jpg привело к пустому белому фону.

Что работало: https://github.com/I-keep-trying/demo5/blob/master/src/images/space.jpg?raw=true

Answer 2

Возможно, вам не хватает атрибута basename в вашем теге BrowserRouter. Здесь вы можете найти больше информации о маршрутизаторе React.Пример BrowserRouter:

<BrowserRouter basename="/calendar"/>
<Link to="/today"/>

Вы также должны помнить, по какому маршруту вы находитесь, когда вы вызываете это изображение, вам, возможно, придется оставить две директории, чтобы вызвать это изображение

Answer 3

У меня была похожая проблема. Просто решил, поставив точку перед всеми путями к файлам. Мои фотографии также находятся в общедоступной папке.

Answer 4

Обновление

Вы отметили create-react-app, следовали ли вы README шаг за шагом? Должно работать нормально.

---

Основная причина, по которой 404 не найден, заключается в том, что базовый путь не совпадает /.

Пожалуйста, добавьте publicPath: /my-repo/ из output в ваш webpack.config.js.

Ссылка: https://github.com/webpack/docs/wiki/configuration#outputpublicpath