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

63lcw9qa  于 2023-02-01  发布在  其他
关注(0)|答案(1)|浏览(127)

我成功地将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.logoawayTeam.logo的图像,而不是它们的超链接。

h7appiyu

h7appiyu1#

你试过添加一个img标签吗?我不确定这是不是你想要的...

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

相关问题