我应该如何加载json响应的图像到HTML?

Question

我成功地将json响应加载到HTML表中。然而，我有一个问题显示json变量的图像。我只能显示链接

下面是json文件的一个示例:

array (
'api' => 
array (
'results' => 10,
'fixtures' => 
array (
0 => 
array (
'fixture_id' => 932017,
'league_id' => 4633,
'league' => 
array (
'name' => 'Pro League',
'country' => 'Saudi-Arabia',
'logo' => 'https://media-3.api-sports.io/football/leagues/307.png',
'flag' => 'https://media-3.api-sports.io/flags/sa.svg',
),
'event_date' => '2023-01-22T20:30:00+03:00',
'event_timestamp' => 1674408600,
'firstHalfStart' => NULL,
'secondHalfStart' => NULL,
'round' => 'Regular Season - 14',
'status' => 'Not Started',
'statusShort' => 'NS',
'elapsed' => 0,
'venue' => 'Mrsool Park',
'referee' => NULL,
'homeTeam' => 
array (
'team_id' => 2939,
'team_name' => 'Al-Nassr',
'logo' => 'https://media.api-sports.io/football/teams/2939.png',
),
'awayTeam' => 
array (
'team_id' => 2934,
'team_name' => 'Al-Ettifaq',
'logo' => 'https://media.api-sports.io/football/teams/2934.png',
),
'goalsHomeTeam' => NULL,
'goalsAwayTeam' => NULL,
'score' => 
array (
'halftime' => NULL,
'fulltime' => NULL,
'extratime' => NULL,
'penalty' => NULL,
),
),

下面是将json输出导入HTML表的代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
th{ 
color:#fff;
}
</style>

<table class="table table-striped">
<tr  class="bg-info">
<th>Home Team</th>
<th>Match Date</th>
<th>Away Team</th>
</tr>
<tbody id="myTable">

</tbody>
</table>
<script>
var myArray = []

$.ajax({
method:'GET',
url:'https://api-football-v1.p.rapidapi.com/v2/fixtures/team/2939/next/10?rapidapi-key={API-Key}',
success:function(response){
myArray = response
buildTable(myArray)
console.log(myArray)
}
})

function buildTable(data){
var table = document.getElementById('myTable')
for (var i = 0; i < data.api.fixtures.length; i++){
const rm = data.api.fixtures[i];
var row = `<tr>
<td>${rm.homeTeam.logo}</td>
<td>${rm.event_date}</td>
<td>${rm.awayTeam.logo}</td>
</tr>`
table.innerHTML += row

}
}
</script>

如您所见，我需要显示homeTeam.logo的图像和awayTeam.logo而不是超链接。提前感谢

Answer 1

您是否尝试添加img标记?我不确定这是否是你想要的……

var row = `<tr>
<td><img src="${rm.homeTeam.logo}" /></td>
<td>${rm.event_date}</td>
<td><img src="${rm.awayTeam.logo}" /></td>
</tr>`