admin管理员组

文章数量:1022488

I've created a HTML page that displays JSON array data in table. The arrays includes ID, Title, and an image. It looks great but the image is currently just text, when I need it to display the actual image of the link. I have no idea how to tackle this.

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

Currently view:

I've created a HTML page that displays JSON array data in table. The arrays includes ID, Title, and an image. It looks great but the image is currently just text, when I need it to display the actual image of the link. I have no idea how to tackle this.

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

Currently view:

  • javascript
  • jquery
  • json
Share Improve this question edited Mar 2, 2019 at 23:53 halfer 20.4k19 gold badges109 silver badges202 bronze badges asked Aug 10, 2017 at 16:48 T.DoeT.Doe 2,0358 gold badges29 silver badges48 bronze badges 1
  • You just need to put the img tag with the url from your JSON. <img src=" '+ value.cover +' " > – MrNew Commented Aug 10, 2017 at 16:50
Add a ment  | 

4 Answers 4

Reset to default 1

Use img tag to display image:

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

Use the tag img src="" to show the image. The JS code should be like this:

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

Following to my first ment, just add img tag like usual in your 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);
  });
});

Working Demo

$(document).ready(function() {
    var data = [
      {
       "id":1,
       "title":"title1",
       "cover":"https://dummyimage./300"
      },
      {
       "id":2,
       "title":"title2",
       "cover":"https://dummyimage./200"
      },
      {
       "id":3,
       "title":"title3",
       "cover":"https://dummyimage./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./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>

I've created a HTML page that displays JSON array data in table. The arrays includes ID, Title, and an image. It looks great but the image is currently just text, when I need it to display the actual image of the link. I have no idea how to tackle this.

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

Currently view:

I've created a HTML page that displays JSON array data in table. The arrays includes ID, Title, and an image. It looks great but the image is currently just text, when I need it to display the actual image of the link. I have no idea how to tackle this.

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

Currently view:

  • javascript
  • jquery
  • json
Share Improve this question edited Mar 2, 2019 at 23:53 halfer 20.4k19 gold badges109 silver badges202 bronze badges asked Aug 10, 2017 at 16:48 T.DoeT.Doe 2,0358 gold badges29 silver badges48 bronze badges 1
  • You just need to put the img tag with the url from your JSON. <img src=" '+ value.cover +' " > – MrNew Commented Aug 10, 2017 at 16:50
Add a ment  | 

4 Answers 4

Reset to default 1

Use img tag to display image:

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

Use the tag img src="" to show the image. The JS code should be like this:

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

Following to my first ment, just add img tag like usual in your 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);
  });
});

Working Demo

$(document).ready(function() {
    var data = [
      {
       "id":1,
       "title":"title1",
       "cover":"https://dummyimage./300"
      },
      {
       "id":2,
       "title":"title2",
       "cover":"https://dummyimage./200"
      },
      {
       "id":3,
       "title":"title3",
       "cover":"https://dummyimage./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./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>

本文标签： javascriptHow can I display image urls from JSON dataStack Overflow

版权声明：本文标题：javascript - How can I display image urls from JSON data? - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745474846a2152275.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。