小编Atu*_*tul的帖子

我已经安装了React create-react-app.它安装得很好,但我试图在我的一个组件(Header.js,文件路径:)中加载一个图像,src/components/common/Header.js但它没有加载.这是我的代码:

import React from 'react'; 

export default () => {
  var logo1 = (
    <img 
      //src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-goose.jpg"
      src={'/src/images/logo.png'}
      alt="Canvas Logo"
    />
  );
  return (
    <div id="header-wrap">
      <div className="container clearfix">
        <div id="primary-menu-trigger">
          <i className="icon-reorder"></i>
        </div>

        <div id="logo">
          <a href="/" className="standard-logo" data-dark-logo='/images/logo-dark.png'>{logo1}</a>
          <a href="/" className="retina-logo" data-dark-logo='/images/logo-dark@2x.png'>
            <img src='/var/www/html/react-demo/src/images/logo@2x.png' alt="Canvas Logo" />
          </a>
        </div>
      </div>
    </div>
  );
} 

如果我src={require('./src/images/logo.png')}在我的logo1变量中写入图像路径,它会给出错误:

编译失败.

./src/Components/common/Header.js出错

未找到模块:/ var/www/html/wistful/src/Components/common中的./src/images/logo.png

请帮我解决这个问题.让我知道我在这里做错了什么.

我已经使用 react 方法设置了内联 css，但编译器显示“意外的令牌错误”，其中我声明了图像 url，这是我的文件代码 -

class Aboutus extends React.Component {
    constructor(props){
        super(props);
        document.title = "About Us";
    }

    var imgUrl_1 = '/images/about/parallax.jpg';
    const style_1 = {
            padding: '250px 0', 
            backgroundImage: 'url('+imgUrl_1+')',
            backgroundSize: 'cover',
            backgroundPosition: 'center center',
        };

    var img_url2 = '/images/team/3.jpg';
    const style_2 = {
        backgroundImage: 'url('+img_url2+')', 
        backgroundPosition: 'center center no-repeat',
        backgroundSize: 'cover',    
        };

    const style_3 = { backgroundColor: '#F5F5F5'};  

    render(){
        return(
            <DefaultLayout>
                <section id="page-title" class="page-title-parallax page-title-dark" style={style_1} data-stellar-background-ratio="0.4">

                    <div class="container clearfix">
                        <h1>About Us</h1>
                        <span>Everything you need to know about …

这是我的index.js文件代码 -

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import { BrowserRouter as Router, Route } from 'react-router-dom'; 
import { Provider } from 'react-redux';
import thunk from 'react-thunk';
import { createStore, applyMiddleware } from 'redux';
import Login from './Components/LoginRegister';

const store= createStore(
        (state = {}) => state, 
        applyMiddleware(thunk)
    );

ReactDOM.render(( 
    <Provider store={store}>
      <Router>
        <switch>
            <Route exact path="/" component={App} />
            <Route path="/Loginregister" component={Login} />
        </switch>
      </Router>
    </Provider>  ),
  document.getElementById('root')
);

因为我在'applyMiddleware'中传递'thunk'作为'applyMiddleware(thunk)'然后我在控制台上得到以下错误 -

Uncaught TypeError: …

我试图在组件文件中显示年份选择框，我尝试了简单的for循环，但是它的语法错误，这是我的代码>

render(){

    return (
            <div>
                <select value={this.state.exp_year} name="exp_year" className="form-control" onChange={this.handleInputChange} >
                    <option value="">===Select Expiry Year===</option>
                    { for(var i=2017; i<=2050; i++){
                        <option value={i}>{i}</option>
                        }
                    }
                </select>
            </div>                  

        );
}   

请让我知道我在做什么错。