Некорректная обработка статических ссылок во вложенном роутинге
Столкнулся с проблемой, когда некорректно обрабатывается статическая ссылка ( в моей случае на изображение ) при вложенном роутинге . У меня есть следующая структура роутинга.
<LoadingProvider>
<Router>
<Header />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/request-help" element={<RequestHelp />} />
<Route path="/shop" element={<Shop />} />
<Route path="/user" element={<UserPage />}>
<Route index element={<Navigate to="my-account" replace />} />
<Route path="my-account" element={<MyAccount />} />
<Route path="wish-list" element={<MyWishList />} />
<Route path="orders" element={<MyOrders />} />
<Route path="chats" element={<MyChats />} />
<Route path="ecology" element={<MyEcology />} />
</Route>
<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
<Footer />
</Router>
</LoadingProvider>
Работаю с компонентом my-account. Вставляя в компонент изображение по ссылке src="/images/default-avatar.png" оно не отображается. Но если вынести компонент my-account из вложенного роутинга в глобальный ( на уровень выше ), то картинка отображается. Следовательно сделал вывод, что проблема заключается в обработке статических ссылок во вложенном роутинге, но нет не единой идеи как это исправить. Спасибо.
Ответы (1 шт):
Автор решения: Danil Filatov
→ Ссылка
Поменял путь следующим образом и проблема решилась.
const BASE_URL = window.location.origin;
// В компоненте:
<img src={`${BASE_URL}/images/default-avatar.png`} />