如何从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);
  });
});

Answer 2

使用标签img src =“”来显示图像。 JS代码应该是这样的：

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

Answer 3

在我的第一条评论之后，只需在你的img中添加td标签

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

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>