javascript - React Router 无法使用嵌套路由正确加载图像

Question

我的路由代码如下所示:

    <Router history={browserHistory}>
        <Route path='/' component={AppContainer}>
            <IndexRoute component={Home}/>
            <Route path='/MyRYLA' component={MyRYLA} />
            <Route path='/gallery' component={PhotoViewer}/>
            <Route path='/about' component={AboutView}>
                <IndexRoute component={AboutRYLA}/>
                <Route path='/about/contact' component={Contact}/>
                <Route path='/about/directions' component={Directions}/>
                <Route path='/about/principles' component={Principles}/>
                <Route path='/about/faq' component={FAQ}/>
            </Route>
        </Route>
    </Router>

我有一个在 AboutView 中呈现的图像，因此 AboutView 下的每个页面上仍然有该图像。但是每次我使用 browserHistory.push('/about/directions') 导航到“/about/directions”这样的嵌套 URL 时，图像都不会加载。但是，如果我使用 browserHistory.push('/about') 导航到“/about”，图像会加载。

我确实在控制台中收到一条错误消息，显示 GET http://localhost:8080/about/af16977b21bb178d3bb328689d1ecd65.jpg 404 (Not Found)。在我看来，这就像它试图从不存在的“关于”目录中获取图像一样。如何加载图像并防止 React-Router 尝试通过不存在的“about”目录访问该图像？

Answer 1

您是否有可能在图片标签中使用相对路径？

类似于 <img src="af16977b21bb178d3bb328689d1ecd65.jpg" />而不是 <img src="/af16977b21bb178d3bb328689d1ecd65.jpg" />

首字母/在src属性使图像从网站的根目录加载。