新 React-Router-Dom V6 中的损坏图像

Question

我正在尝试在我的 React 应用程序中使用一个组件作为导航栏。导航栏上有一个图像作为徽标。在嵌套路由之外，导航栏中的徽标显示得很好。但是，当我尝试在嵌套路由内使用导航栏时，徽标图像 link 显示为已损坏。下面是我如何导入我的徽标图像，然后是我如何嵌套路由：

    <Link to="/" className="links">
      <span className="logo">
        <img src="./assets/logo.jpg" alt="" />
      </span>
    </Link>

function App() { return (
<div>
  <BrowserRouter>
    <Routes>
      <Route path="/">
        <Route index element={<Home />} />
        <Route path="about" alement={<About />} />
        <Route path="services">
          <Route index element={<Services />} />
          <Route path=":serviceId" element={<Service />} />
        </Route>
      </Route>
    </Routes>
  </BrowserRouter>
</div>);}

Answer 1

我建议不要将图片路径写成

<img src="./assets/logo.jpg" alt="" />

删除 assets 前面的点，将其保留为：

<img src="/assets/logo.jpg" alt="" />

这将确保资产文件夹从根目录加载，并且可从整个应用程序的任何位置访问

新 React-Router-Dom V6 中的损坏图像

Broken Images in New React-Router-Dom V6

reactjs

react-router-dom