使用reactjs动态渲染图像

在reactjs中动态渲染图像…… 我想做的是，当用户在我的下拉菜单中选择新团队时，动态更改图像

<Col xs="6">
         <Label for="name"><h2> Home Team </h2> </Label>
          <Input type="select" name="homeTeam" id="exampleSelect" onChange={this.handleChange}>
            <option>Utah Jazz</option>
            <option>Houston Rockets</option>
            <option>Cleveland Cavaliers</option>
            <option>Boston Celtics</option>
            <option>Golden State Warriors</option>
            <option>Los Angeles Lakers</option>
          </Input>

主队
犹他爵士
休斯顿火箭队
克利夫兰骑士队
波士顿凯尔特人队
金州勇士队
洛杉矶湖人队

我试图通过使用以下状态来实现这一点：

<Img src={require(this.state.homeImage)} width="100" height="50"/>

或

但我要么会说一个错误

找不到模块“”

或

这是一个保留字

分别

下面是我的组件的代码。我将非常感谢任何关于如何解决这个问题的意见，或者任何关于如何使相同功能工作的新想法！谢谢大家!

import React, { Component } from 'react';
import axios from 'axios';
import { Button, Form, FormGroup, Label, Input, FormText, Row, Col, Container, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
import ReactDOM from 'react-dom';
import Img from 'react-image'
import 'bootstrap/dist/css/bootstrap.min.css';
import Carousel1 from './HomeCarousel.js';
import Carousel2 from './AwayCarousel.js';
import './nba.css';
import nbaLogo from '../../images/nbaLogo.jpg';






class HomeTeamSelector extends Component {

  constructor(props) {
    super(props)




    this.state = {
      // homeTeam: '',
      // awayTeam: '',
      homeTeam: 'Jazz',
      awayTeam: 'Jazz',
      homeImage: '../../images/nbaLogo.jpg',
      awayImage: 'nbaLogo',
    }


    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }


componentDidMount(){
  // this.setState({
  //   homeImage: 'nbaLogo',
  // })
    this.state.homeImage = '../../images/nbaLogo.jpg';
  // console.log('homeImage: ', this.state.homeImage);
  var image = '../../images/nbaLogo.jpg';
  console.log('image: ',image);
}





    handleChange = e => {
      // this.setState({
      //   [e.target.name]: e.target.value,
      //   homeImage: '../../images/nbaLogo.jpg',
      // })
      this.state.homeImage = '../../images/nbaLogo.jpg';

      console.log('handle change homeImage: ',this.state.homeImage);
      const image = this.state.homeImage
      console.log('image is: ', image);
      this.state.homeImage = image;
    }

    async handleSubmit(e, activeIndex) {
      e.preventDefault()
      // const  { homeTeam } = this.state



      const teams = {
        // homeTeam: this.state.homeTeam,
        // awayTeam: this.state.awayTeam,
        homeTeam: this.state.homeTeam,
        awayTeam: this.state.awayTeam,
      }

      const form = await axios.post('/api/form', {teams});


     }





  render() {
    return (
      <div className="pickerDiv">
      <img src={nbaLogo} width="100" height="50" />
      <Img src={require(this.state.homeImage)} width="100" height="50"/> /// <--- this is the line that i am referring to in my post.
      <p> {this.state.homeImage} </p>
      <h1> {this.state.homeTeam} -vs- {this.state.awayTeam} </h1>
      <Form className="emailForm" onSubmit={this.handleSubmit} style={{ width: '600px'}}>

        <FormGroup id="formElement">

<div id="test">

<Container>
    <Row>

         <Col xs="6">
         <Label for="name"><h2> Home Team </h2> </Label>
          <Input type="select" name="homeTeam" id="exampleSelect" onChange={this.handleChange}>
            <option>Utah Jazz</option>
            <option>Houston Rockets</option>
            <option>Cleveland Cavaliers</option>
            <option>Boston Celtics</option>
            <option>Golden State Warriors</option>
            <option>Los Angeles Lakers</option>
          </Input>

         </Col>
         <Col xs="6">
         <Label for="name"><h2> Away Team </h2> </Label>
         <Input type="select" name="awayTeam" id="exampleSelect" onChange={this.handleChange}>
           <option>Utah Jazz</option>
           <option>Houston Rockets</option>
           <option>Cleveland Cavaliers</option>
           <option>Boston Celtics</option>
           <option>Golden State Warriors</option>
           <option>Los Angeles Lakers</option>
         </Input>



         </Col>
       </Row>
</Container>

</div>

    </FormGroup>



    <Button color="primary">Send</Button>

  </Form>







      </div>
    );
  }



}



export default HomeTeamSelector;

import React，{Component}来自'React'；
从“axios”导入axios；
从“reactstrap”导入{按钮、表单、表单组、标签、输入、表单文本、行、列、容器、下拉、下拉切换、下拉菜单、下拉项}；
从“react dom”导入react dom；
从“反应图像”导入Img
导入'bootstrap/dist/css/bootstrap.min.css'；
从“/HomeCarousel.js”导入转盘1；
从“/AwayCarousel.js”导入Carousel2；
导入“/nba.css”；
从“../../images/nbaLogo.jpg”导入nbaLogo；
类HomeTeamSelector扩展了组件{
建造师（道具）{
超级（道具）
此.state={
//主队：''，
//阿瓦泰姆：“，
主队：“爵士”，
阿瓦泰姆：“爵士乐”，
homeImage:“../../images/nbaLogo.jpg”，
awayImage:‘nbaLogo’，
}
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
componentDidMount（）{
//这是我的国家({
//homeImage:“nbaLogo”，
// })
this.state.homeImage='../images/nbaLogo.jpg'；
//console.log（'homeImage:'，this.state.homeImage）；
var image='../images/nbaLogo.jpg'；
log（'image:'，image）；
}
handleChange=e=>{
//这是我的国家({
//[e.target.name]：e.target.value，
//homeImage:“../../images/nbaLogo.jpg”，
// })
this.state.homeImage='../images/nbaLogo.jpg'；
log（'handle change homemage:'，this.state.homemage）；
const image=this.state.homeImage
log（'image is:'，image）；
this.state.homeImage=image；
}
异步handleSubmit（e，activeIndex）{
e、 预防默认值（）
//const{homeTeam}=this.state
警察队={
//主队：这个州，主队，
//awayTeam:this.state.awayTeam，
主队：这个州，主队，
awayTeam:this.state.awayTeam，
}
const form=wait axios.post（'/api/form'，{teams}）；
}
render（）{
返回(
///根据状态，您可以传递带有图像的对象，但首先必须使用昵称导入，如下所示：

import foo from '../images/foo.jpg';
import bar from '../images/bar.jpg';

因此，根据您所在的州，您可以执行以下操作：

class HomeTeamSelector extends Component {

constructor(props) {
super(props)
this.state = {
  homeTeam: 'Jazz',
  awayTeam: 'Jazz',
  switchImage: false,
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange = e => {
   this.setState({
     switchImage: true,   
  })
}
  render() {
  const { swichtImage } = this.state;

   const imagePassedDown = if(switchImage) {
     return foo;
  } else if(!switchImage) {
      return bar;
  }
  };
   return (
    <div className="pickerDiv">
    <img src={imagePassedDown} width="100" height="50"/> 
     <p> {this.state.homeImage} </p>
     <h1> {this.state.homeTeam} -vs- {this.state.awayTeam} </h1>
     <form className="emailForm" onSubmit={this.handleSubmit} style={{ width: '600px'}}>

    );
  }
}



 export default HomeTeamSelector;

类HomeTeamSelector扩展组件{
建造师（道具）{
超级（道具）
此.state={
主队：“爵士”，
阿瓦泰姆：“爵士乐”，
switchImage:false，
}
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleChange=e=>{
这是我的国家({
图像：是的，
})
}
render（）{
const{swichtImage}=this.state；
const imagePassedDown=if（switchImage）{
返回foo；
}如果（！switchImage），则为else{
返回杆；
}
};
返回(
{this.state.homeImage}

{this.state.homeTeam}-vs-{this.state.awayTeam}
);
}
}
导出默认HomeTeamSelector；

基本上，我所做的是传递一个对象，该对象引用的图像将根据状态而有所不同（即：每次单击某个对象时，该对象都会发生变化）。这是基本想法，希望它有所帮助：）
可能会重复
class HomeTeamSelector extends Component {

constructor(props) {
super(props)
this.state = {
  homeTeam: 'Jazz',
  awayTeam: 'Jazz',
  switchImage: false,
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange = e => {
   this.setState({
     switchImage: true,   
  })
}
  render() {
  const { swichtImage } = this.state;

   const imagePassedDown = if(switchImage) {
     return foo;
  } else if(!switchImage) {
      return bar;
  }
  };
   return (
    <div className="pickerDiv">
    <img src={imagePassedDown} width="100" height="50"/> 
     <p> {this.state.homeImage} </p>
     <h1> {this.state.homeTeam} -vs- {this.state.awayTeam} </h1>
     <form className="emailForm" onSubmit={this.handleSubmit} style={{ width: '600px'}}>

    );
  }
}



 export default HomeTeamSelector;