How am I supposed to load the images of json reponses into HTML?-CodePudding

I successfully loaded the json responses into an HTML table. However, I am having a problem displaying the images of the json variables. I could only display the links.

Here is a sample of the json file:

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

And here is the code for importing the json output into the HTML table:

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

As you can see, I need to show the images of homeTeam.logo and awayTeam.logo instead of their hyperlinks. Thanks in advance

CodePudding user response：

Have you tried adding an img tag? I'm not sure if this is what you're asking for...

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