可重用组件静态图像不会在不同的路由上加载

Question

所以基本上问题是我有一些组件，比如页眉或页脚，它们在所有页面中都是相同的，我在下面的路线上寻址图像CCD_ 1的方式类似于这个

<Route exact path="/" component={HomePage} >
</Route>
<img src="./SVG/icon.svg" alt="go-logo"></img>

它在该路线和未嵌套的路线上运行良好，但每当我的路线更改为类似的东西时

<Route exact path="/city/NY" component={City} >
</Route>

我应该将图像地址更改为下面，以使其正常工作

<img src="../SVG/icon.svg" alt="go-logo"></img>

我知道我可以在每个组件中植入这个标头，并使用props使地址正确，但我想知道是否有更好的方法可以做到这一点？

Answer 1

您可以使用嵌套路由：

return (
<Router>
<div>
<header>Your Header</header>
<Switch>
<Route exact path="/">
<HomePage />
</Route>
<Route path="/city/NY">
<City />
</Route>  
</Switch>
<footer>Your Footer</footer>
<div>
</Router>
)

您也可以制作页眉和页脚组件。

https://reacttraining.com/react-router/web/example/nesting

Answer 2

使用ES6导入。导入SVG并将其作为变量引用，不要忘记大括号。

在页眉组件内部。。

import logo from "./SVG/icon.svg";
<img src={logo} alt="go-logo"></img>