Question

您好我使用react router来浏览我的网页。

我使用create-react-app来启动我的项目。

使用React@15.4.2, react-router@3.0.2

发生了一件奇怪的事情;手动刷新时加载图像，但使用导航栏导航到Web的不同部分时无法加载。

这是我如何定义路线：

Class App extends Component{
    render () {
      return (
      <Router history={browserHistory}>
        <Route path="/" component={Main}>
          <IndexRoute component={Home}/>
          <Route path="create" component={Create}/>
          <Route path="login" component={Login}/>

        </Route>

      </Router>
    );
    }}

此处的登录组件

    import React, { Component } from 'react';
     class Login extends Component{
     render () {
        return (
         <div>
           <div className="main-container">
             <section className="height-100 imagebg text-center" data-overlay="4">
                 <div className="background-image-holder">
                     <img alt="background" src='img/inner-6.jpg' />
                 </div>
                 <div className="container pos-vertical-center">
                     <div className="row">
                         <div className="col-sm-7 col-md-5">
                             <h2>Login to continue</h2>
                             <p className="lead">
                                 Welcome back, sign in with your existing Stack account credentials
                             </p>
                             <form>
                                 <div className="row">
                                     <div className="col-sm-12">
                                         <input type="text" placeholder="Username" />
                                     </div>
                                     <div className="col-sm-12">
                                         <input type="password" placeholder="Password" />
                                     </div>
                                     <div className="col-sm-12">
                                         <button className="btn btn--primary type--uppercase" type="submit">Login</button>
                                     </div>
                                 </div>

                             </form>
                             <span className="type--fine-print block">Dont have an account yet?
                                 <a href="page-accounts-create-1.html">Create account</a>
                             </span>
                             <span className="type--fine-print block">Forgot your username or password?
                                 <a href="page-accounts-recover.html">Recover account</a>
                             </span>
                         </div>
                     </div>

                 </div>

             </section>
         </div>

      </div>
    );}}
   export default Login;

因此，我尝试将图片'inner-6.jpg'加载为背景图片。

当我手动刷新Login组件上的页面时，图片加载正常，但是当我路由到例如Create or Home,然后返回/单击导航栏上的登录时，图像没有＆＃39 ; t加载。

我尝试使用;

加载图片

src={require('./img/inner-6.jpg')}

但同样的事情发生了。

{Main}组件中的图片做同样的事情。

我加载的图片错了吗？如果是这样，当我手动刷新页面时它是如何加载的？或者我错了？

*尝试使用绝对路径从网络（http://tinypic.com/）加载随机图像。同样的事情仍然发生

React-Router（v3）未加载图像

0 个答案: