Приложение React на страницах GitHub - в URL отсутствует имя репозитория
Храню изображения в папке public/assets/img. Затем я использую его в таком компоненте:
const imageUrl = "/assets/img/image.png"
Локально все работает нормально, но на страницах GitHub в URL-адресе изображения почему-то отсутствует имя моего репо, поэтому вместо
http://name.github.io/my-repo/assets/img/image.png Я получаю http://name.github.io/assets/img/image.png
Я следовал инструкциям по созданию сборки GitHub Pages и добавил в package.json URL-адрес моего проекта, а именно "homepage": "https://name.github.io/my-repo".
-- редактировать --
Кроме того, я только что понял, что, хотя маршрутизация, похоже, работает нормально, она также пропускает имя моего репозитория в URL-адресе, поэтому вместо
http://name.github.io/my-repo/subpage есть
http://name.github.io/subpage
Что мне здесь не хватает?
не работает тогда локально
Должен работать в git, когда вы используете /assets/..., на самом деле он разрешается в корень, так как вы находитесь внутри подкорня, которым является https://root/subroot, вам нужно удалить /
Вы используете обычную настройку webpack? Вы использовали приложение create response?
добавление косой черты перед активами приводит к локальному сбою изображения. Я пробовал добавить косую черту в конце пути к homepage, но это ничего не изменило. Я использовал приложение для создания реакции.
теперь я понял, что, хотя моя маршрутизация работает нормально, в URL-адресе отсутствует мое имя репо ... так что это http://name.github.io/subage. Я отредактировал свой пост
Вероятно, вам нужно указать /my-repo в <base> и использовать относительный путь assets/img/image.png вместо абсолютного.
Большое спасибо, у меня был белый экран при открытии локального сервера, я не мог понять почему, оказалось, что проблема была в package.json: неправильный URL на домашней странице, это было типа "github.com/DaLVeRS2001/DaLVeRS2001#readme", и это надо было так "github.com/DaLVeRS2001". Я из России. недавно я начал все это изучать.
Ответы 1
Итак, я каким-то образом решил свои проблемы, однако решения меня не совсем устраивают:
Устранение проблемы с URL-адресом (в URL отсутствует имя репо)
Я добавил свойство basename в свой маршрутизатор <BrowserRouter basename = "/repo-name">
Минусы: во-первых, он не выглядит хорошо запрограммированным. Во-вторых, npm start открывает пустой localhost:3000. Мне нужно добавить свое имя репо, чтобы открыть приложение локально, так что localhost:3000/repo-name - не слишком аккуратно.
Устранение проблемы с изображениями (также отсутствует имя репо в URL-адресе и, следовательно, не отображаются изображения)
Я добавил переменную process.env.PUBLIC_URL к URL-адресу изображения: const imageUrl = ${process.env.PUBLIC_URL}/assets/img/image.png. В локальной среде он пуст, при развертывании принимает значение homepage от package.json, то есть https://name.github.io/repo-name
Оборотная сторона: нужно добавлять process.env.PUBLIC_URL перед каждым изображением, отображаемым в компоненте.
Буду признателен за лучшее решение!
не могли бы вы попробовать с
assets/img/image.png