React Routing и статические ссылки

Вопрос-ответ JavaScript
1

Доброго времени суток. Столкнулся с проблемой, когда некорректно обрабатывается статическая ссылка ( в моей случае на изображение ) при вложенном роутинге .

У меня есть следующая структура роутинга.

<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 из вложенного роутинга в глобальный ( на уровень выше ), то картинка отображается. Следовательно сделал вывод, что проблема заключается в обработке статических ссылок во вложенном роутинге, но нет не единой идеи как это исправить. Спасибо.

2

А в network консоли как показывается запрос за картинкой? По какому пути браузер пытается ее подгрузить?

–

Скорее всего дело где-то в относительности-абсолютности путей. Чтобы исключить этот аспект из ситуации попробуй сгенерировать полный путь к изображению, включая домен и протокол. Примерно так:

const BASE_URL = window.location.origin;

// В компоненте:
<img src={`${BASE_URL}/images/default-avatar.png`} />

И попробуй импортировать изображение напрямую. Может твоя система билда подхватит и сама разберется

import defaultAvatar from '/public/images/default-avatar.png';

// В компоненте:
<img src={defaultAvatar} />
3

Помогло, спасибо.