Question

我想使用map（）在sports数组中显示图像。但没有工作

<div className="row">
   {this.state.sports.map(function(sport, index){
     return (
     <div className="col-md-3" key={index}>
       <h3 className="text-center">{this.state.sports.name}</h3>
       <img src={ require('./../assets/images/'+ {this.state.sports.name} +'.jpg') } width="300px" height="180px" />
       <button className="btn btn-info btn-sm" type="submit" onClick={this.join_in_sport} >JOIN</button>
     </div>
    )
  }.bind(this))}
</div>

Answer 1

问题似乎在于如何为图像构建路径名。您的<h3>代码也是如此。

src={ require('./../assets/images/'+ {this.state.sports.name} +'.jpg') }

如果this.state.sports是一个数组而不是一个对象，那么它不可能有一个name键。我认为您打算在name中为每次迭代打印当前对象map()。

所以试试：

<h3 className="text-center">{this.state.sports.name}</h3>
<img src={ require('./../assets/images/'+ {sport.name} +'.jpg') } width="300px" height="180px" />

这假设您的数组看起来像：

[
  {name: "foo"},
  {name: "bar"}
]

使用map（）动态显示图像反应不起作用

1 个答案: