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>
Create an Image object (with needed attributes) and add it to the exiting div
var data = {
"images": [{
"bannerImg1": "http://i.stack.imgur.com/HXS1E.png?s=32&g=1"
},
{"bannerImg1" : "http://i.stack.imgur.com/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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments