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

【问题标题】：Broken Images in New React-Router-Dom V6新 React-Router-Dom V6 中的损坏图像
【发布时间】：2022-11-11 05:36:14
【问题描述】：

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

    <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>);}

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

我建议不要将图像路径写为

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

删除资产前的点并将其保留为：

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

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

【讨论】：

【解决方案2】：

那么谷歌链接地址呢，它也不能正常工作！

【讨论】：