Реагировать приложение на GitHub Pages - URL отсутствует имя хранилища

Question

Я храню изображения в папке 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"

- edit -

Кроме того, я только сейчас понял, что хотя маршрутизация, кажется, работает нормально, она также пропускает имя моего хранилища в URL, поэтому вместо

http://name.github.io/my-repo/subpage есть

http://name.github.io/subpage

Что мне здесь не хватает?

Answer 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 перед каждым изображением, отображаемым в компоненте.

Буду признателен за лучшее решение!