Javascript 循环遍历图像数组以生成表React

我试图从一组图像中生成一个足球积分表。例如，这是我的数组：

import arsenal from './images/Arsenal.png';
import bournemouth from './images/AFCBournemouth.png';
import villa from './images/AstonVilla.png';

const icons =[{arsenal},{bournemouth},{villa}];

目前，我的类是这样创建的：

class Standings extends React.Component{

render(){

return(
<Table striped bordered hover size="sm">
  <thead>
          <tr>
            <th>Teams</th>
            <th>Points</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <img src={bournemouth} class="icon" height="42" width="42" />
            </td>
            <td>0</td>
          </tr>
          <tr>
            <td>
              <img src={arsenal} class="icon" height="42" width="42" />
            </td>
            <td>0</td>
          </tr>
          <tr>
            <td>
              <img src={villa} class="icon" height="42" width="42" />
            </td>
            <td>3</td>
          </tr>
        </tbody>
</Table>
)

}


}

班级排名扩展了React.Component{
render（）{
返回(
团队
要点
0
0
3.
)
}
}

是否有一种通过循环图像数组来生成表的方法？如果可能，我想向阵列中添加更多图像。

使用

map（）方法创建一个新数组，其中填充了对调用数组中的每个元素调用所提供函数的结果

const icons=[阿森纳、伯恩茅斯、维拉]；
班级排名扩展了React.Component{
render（）{
返回(
团队
要点
{icons.map（（url，idx）=>(
{idx}
))}
);
}
}

您可以使用以下团队创建对象数组：

const teams = [
    {
       url: 'url',
       name: 'Arsenal,
       points: 3
    }
]

然后对其进行迭代：

<Table striped bordered hover size="sm">
 <thead>
          <tr>
            <th>Teams</th>
            <th>Points</th>
          </tr>
        </thead>
        <tbody>
{
    teams.map((team) => (
        <tr>
            <td>
                <img src={team.url} class="icon" height="42" width="42" />
            </td>
            <td>{ team.points }</td>
        </tr>
}
        </tbody>
</Table>

团队
要点
{
团队地图（（团队）=>(
{team.points}
}

此外，如果不起作用，请尝试如下设置img的src：

<img src={{uri: team.url}} />

Hi，地图可以正常工作，但图像无法在表中处理…@clattenburgcake Use

const icons=[阿森纳、伯恩茅斯、维拉]；

抱歉。没有看到更改！

<img src={{uri: team.url}} />