Образ src на index.html искажается из-за пути реагирующего маршрутизатора?

Question

У меня есть два изображения в моем файле index.html, которые ведут себя как страница загрузки для моего приложения реагирования.

В моем файле app.js отображаются следующие маршруты:

<BrowserRouter>
      <Switch>
          <Route path="/" exact component={Home}/>
          <Route path="/contactus" exact component={ContactForm}/>
          <Route path="/shop" exact component={shopLanding}/>

          <Route path="/product-page/:slug/:idNumber" exact component={ShopPages}/>)

      </Switch>
    </BrowserRouter>

Для первых трех маршрутов изображения src в файле index.html называются: http://localhost:3000/images/LoadingPageBackground.jpg и http://localhost:3000/images/purpleHandsLogo.png

На последних маршрутах изображения дают ошибку 404 и называются так:

GET http://localhost:3000/product-page/straight/images/purpleHandsLogo.png 404 (Not Found)

GET http://localhost:3000/product-page/straight/images/LoadingPageBackground.jpg 404 (Not Found)

Наряду сдругая ошибка:

GET http://localhost:3000/product-page/straight/undefined 404 (Not Found)

Этот новый URL-адрес вызывается из пути <Link>, поступающего из другого компонента, который ссылается на последний маршрут, показанный выше.<Link> выглядит следующим образом:

<Link to={{ pathname: `/product-page/${this.props.slug}/${this.props.idNumber}`,
                  state: {
                    urlId: this.props.idNumber
                  }
                }}>

Я могу решить эту проблему, сделав ссылку на изображение в index.html, начиная с http://localhost:3000/ вместо пути к файлу, но это больше не будет работать после того, как сайтэто живой.

Почему изображение изменяется для этого конкретного маршрута?

Любая помощь?