你可以使用

<img className="image" src=`images/${this.props.image}`>

or

<img className="image" src={'images/'+this.props.image}>

or

  render() {
         let imageUrl = this.props.image ? "images/"+this.props.image : 'some placeholder url image';
    return (
       <div>
          <img className="image" src={imageUrl} />
       </div>
    )
  }

你可以使用

<img className="image" src=`images/${this.props.image}`>

or

<img className="image" src={'images/'+this.props.image}>

or

  render() {
         let imageUrl = this.props.image ? "images/"+this.props.image : 'some placeholder url image';
    return (
       <div>
          <img className="image" src={imageUrl} />
       </div>
    )
  }

注意:在react中，你可以把javascript表达式放在花括号内。我们可以在这个例子中使用这个属性。 注意:请看下面的例子:

class LoginForm extends React.Component {

  constructor(props) {
    super(props);

    this.state = {i:1};
  }

  handleClick() {
    this.setState(prevState => ({i : prevState.i + 1}));

    console.log(this.state.j);  
  }


  render() {

    return (
      <div>
        <p onClick={this.handleClick.bind(this)}>Click to change image</p>
        <img src={'images/back'+ this.state.i+'.jpg'}/>
      </div>
      );

  }
}

这里是动态类名或道具的最佳选项，只需像我们在Javascript中做的那样做一些连接。

     className={
        "badge " +
        (this.props.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }

React(或JSX)不支持属性值内的变量插值，但你可以把任何JS表达式放在花括号内作为整个属性值，所以这是可行的:

<img className="image" src={"images/" + this.props.image} />

如果你正在使用JSX和Harmony，你可以这样做:

<img className="image" src={`images/${this.props.image}`} />

在这里，您将src的值写成表达式。