Get image from JSON file using JavaScript and display in HTML img tag

Question

I'm really unsure what I'm doing wrong here. My code makes sense to me, but then again I guess I'm just a beginner. Seems so simple yet I can't figure it out. Any help would be great, please and thank you.

Please read code comments for specifications of what I'm trying to do.

JSON code:

{"images":[
{
    "bannerImg1":"./images/effy.jpg"
}]}

JavaScript:

$.getJSON('data.json', function(data) { // Get data from JSON file
for (var i in data.images) {
    var output+=data.images[i].bannerImg1; // Place image in variable output
}
document.getElementById("banner-img").innerHTML=output;}); // Display image in the img tag placeholder

HTML:

<div class="banner-section">
    <!-- Image should load within the following img tag -->
    <img class="banner-img" alt="effy">
</div>

Sigismundus · Accepted Answer · 2015-02-28 05:25:49Z

6

Create an Image object (with needed attributes) and add it to the exiting div

var data = {
  "images": [{
    "bannerImg1": "https://i.sstatic.net/HXS1E.png?s=32&g=1"
  },
  {"bannerImg1" : "https://i.sstatic.net/8ywqe.png?s=32&g=1"
  }]
};
data.images.forEach( function(obj) {
  var img = new Image();
  img.src = obj.bannerImg1;
  img.setAttribute("class", "banner-img");
  img.setAttribute("alt", "effy");
  document.getElementById("img-container").appendChild(img);
});

<div class="banner-section" id="img-container">
    </div>

edited Feb 28, 2015 at 5:25

answered Feb 28, 2015 at 4:48

Sigismundus

6254 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

natlotzy Over a year ago

Thanks for the help, I can see how your code above works. I'm not sure why I'm so determined to get it working with JSON, I guess I thought it'd be a good way to store data...but maybe I should just stick with your way. Oh and the id thing was a silly mistake (from your previous answer before changing it), thanks for catching that.

Sigismundus Over a year ago

Actually data is the JSON from getJSON call. To make it work in your code, copy paste the code from data.images to the function(data) body.

natlotzy Over a year ago

Oh, my mistake, I see what you mean. Thanks a ton for the help

Balkrushn · Accepted Answer · 2015-02-28 05:01:28Z

2

Put a div in a body with attribute id picture e.g.<div id="picture"></div>

Append img tag to the div

//code
success : function(data) {
              var returnData = jQuery.parseJSON(data);           
              $("#picture").append("<img src=\" + returnData.img_url + "\" />");
           });
//code if any

answered Feb 28, 2015 at 5:01

Balkrushn

911 gold badge2 silver badges12 bronze badges

2 Comments

natlotzy Over a year ago

This isn't working for me :( perhaps I'd doing something wrong... but thanks for the help!

Balkrushn Over a year ago

@mamimi Always welcome bro. What problem coming to you with this code?

Ringo · Accepted Answer · 2015-02-28 04:38:00Z

0

Try this:

    $.getJSON('data.json', function(data) { // Get data from JSON file
     try{
      var json = $.parseJSON(data);
      for (var i =0; i< json.images.length; i++) {
        var output+=json.images[i].bannerImg1; // Place image in variable output
     }
      document.getElementById("banner-img").innerHTML=output;
     }catch{}
    });

answered Feb 28, 2015 at 4:38

Ringo

3,9873 gold badges25 silver badges38 bronze badges

1 Comment

natlotzy Over a year ago

Hmm, this seemed like it would've worked, but it's still not loading the image for me... thanks for the help!

Collectives™ on Stack Overflow

Get image from JSON file using JavaScript and display in HTML img tag

3 Answers 3

3 Comments

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

1 Comment

Linked

Related