Reactjs 在react not working中使用map（）动态显示图像

我想使用map（）在运动数组中显示图像。但不起作用

<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> 

{this.state.sports.map（函数（运动，索引）{
返回(
{this.state.sports.name}
参加
)
}.bind（this））}

问题似乎在于如何为图像构建路径名。您的

标签也是如此

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

如果

this.state.sports

是一个数组，而不是一个对象，那么它不可能有

名称

键。我想您是想为

map（）

中的每个迭代打印当前对象

name

因此，请尝试：

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

---

问题似乎在于如何为图像构建路径名。您的

标签也是如此

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

如果

this.state.sports

是一个数组，而不是一个对象，那么它不可能有

名称

键。我想您是想为

map（）

中的每个迭代打印当前对象

name

因此，请尝试：

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

---

什么东西真的不起作用？您得到了什么错误？您正在迭代此.state.sports，因此它是一个数组。稍后您将执行

this.state.sports.name

这将在

img

DOM中未定义。什么真正不起作用？您得到了什么错误？您正在迭代此.state.sports，因此它是一个数组。稍后执行

this.state.sports.name

这将在

img

DOM中未定义。