javascript - 如何显示 JSON 数据中的图像 URL？

Question

我创建了一个 HTML 页面，在表中显示 JSON 数组数据。该数组包括 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标签显示图像:

$(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);
  });
});