JSONデータからイメージURLを表示するにはどうすればよいですか？

Question

テーブルにJSON配列データを表示するHTMLページを作成しました。配列には、ID、タイトル、イメージが含まれます。それは素晴らしいですが、私はリンクの実際のイメージを表示するために必要なときに、イメージは現在、テキストだけです。私はこれにどのように取り組むべきか分かりませんが、誰でも助けてくれますか？

HTML：

<div id="container"> 
    <div id="one_article" style=""> 
    <table id="article_table" class="table table-bordered "> 
     <th>ID</th> 
     <th>Title</th> 
     <th>Cover Image</th> 
    </table> 
    </div> 
</div> 

Javascriptを：

$(document).ready(function() { 
    $.getJSON("article.json", function(data){ 
    console.log(data) //just to log in console as well 
    var article_data = ''; 
    $.each(data, function(key, value){ 
     article_data += '<tr>'; 
     article_data += '<td>'+value.id+'</td>'; 
     article_data += '<td>'+value.title+'</td>'; 
     article_data += '<td>'+value.cover+'</td>'; 
     article_data += '</tr>'; 
    }); 
    $('#article_table').append(article_data); 
    }); 
}); 

現在表示：

Answer 1

使用img表示画像へのタグ：

​​

Answer 2

イメージを表示するには、img src = ""というタグを使用します。ちょうどあなたのtd

​​

Answer 3

：JSコードは次のようにする必要があります

Answer 4

ワーキングデモ

$(document).ready(function() { 
 
    var data = [ 
 
     { 
 
     "id":1, 
 
     "title":"title1", 
 
     "cover":"https://dummyimage.com/300" 
 
     }, 
 
     { 
 
     "id":2, 
 
     "title":"title2", 
 
     "cover":"https://dummyimage.com/200" 
 
     }, 
 
     { 
 
     "id":3, 
 
     "title":"title3", 
 
     "cover":"https://dummyimage.com/400" 
 
     } 
 
    ]; 
 
    var article_data = ''; 
 
    $.each(data, function(key, value){ 
 
     article_data += '<tr>'; 
 
     article_data += '<td>'+value.id+'</td>'; 
 
     article_data += '<td>'+value.title+'</td>'; 
 
     article_data += '<td><img src="'+value.cover+'"></td>'; 
 
     article_data += '</tr>'; 
 
    }); 
 
    $('#article_table').append(article_data); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div id="one_article" style=""> 
 
    <table id="article_table" class="table table-bordered "> 
 
     <th>ID</th> 
 
     <th>Title</th> 
 
     <th>Cover Image</th> 
 
    </table> 
 
    </div> 
 
</div>

にいつものように imgタグを追加し、私の最初のコメントに続いて

$(document).ready(function() { 
    $.getJSON("article.json", function(data){ 
    console.log(data) //just to log in console as well 
    var article_data = ''; 
    $.each(data, function(key, value){ 
     article_data += '<tr>'; 
     article_data += '<td>'+value.id+'</td>'; 
     article_data += '<td>'+value.title+'</td>'; 
     article_data += '<td> <img src="'+value.cover+'"> </td>'; 
     article_data += '</tr>'; 
    }); 
    $('#article_table').append(article_data); 
    }); 
});