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'等嵌套网址时，图片都不会加载。但是，如果我使用browserHistory.push('/about')导航到'/ about'，则图片会加载。

我在控制台中收到GET http://localhost:8080/about/af16977b21bb178d3bb328689d1ecd65.jpg 404 (Not Found)的错误信息。这看起来像是试图从一个不存在的'about'目录中获取图像。如何加载图像并阻止React-Router尝试通过不存在的“about”目录访问此图像？

Answer 1

您是否可以在图片代码中使用相对路径？

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

/属性中的初始src会从网站的根目录加载图像。

Answer 2

您传递给它的图片链接是什么？你能说清楚吗？即'http://....your link'，不要让它变得相对。

Answer 3

我假设你使用webpack？

//require the image
let img = require("/img.jpg") //the static path which you've defined in you webpack.config

// And see to it your plugins are set correctly to read the image files
// webpack.config.js

module.exports = {
    module: {
        loaders: [{ test: /\.(jpe?g|gif|png|svg)$/, loader: "file" }]
    }
}

React Router不会使用嵌套路由正确加载图像

3 个答案: