React Router Dom v6 - 在嵌套路由中找不到图像

Question

在我的tsconfig.json文件中，我有一个"compilerOptions":{baseUrl}使我能够像这样在public/images/foo.png中查找图像<img src='images/foo.png/> 。
这仍然有效，除了我的嵌套路线。 它在第 16 行和其他未嵌套的路由中工作，但在第 17 行中不工作，即使我复制粘贴它以确保它们具有相同的拼写和大写。

我还尝试查看浏览器的开发工具的检查器，看看它们是否有类似的 src，它们确实有，但加载图像时出现问题。 工作 src不工作 src

Answer 1

您应该始终在图像路径之前使用正斜杠“/”，如下所示

<img src='/images/foo.png/>

不像这样

<img src='images/foo.png/>

Answer 2

例如，当您告诉浏览器在当前路由为/foo/bar时查找images/foo.png时，浏览器将搜索/foo/images/foo.png 。

为避免这种情况，请在路径的开头添加一个斜杠（例如images/foo.png将变为/images/foo.png ）。