使用 JavaScript 从 JSON 文件中获取图像并显示在 HTML img 标签中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28778048/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get image from JSON file using JavaScript and display in HTML img tag
提问by natlotzy
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:
JSON 代码：
{"images":[
{
"bannerImg1":"./images/effy.jpg"
}]}
JavaScript:
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:
HTML：
<div class="banner-section">
<!-- Image should load within the following img tag -->
<img class="banner-img" alt="effy">
</div>
回答by Sigismundus
Create an Image object (with needed attributes) and add it to the exiting div
创建一个 Image 对象（具有所需的属性）并将其添加到现有的 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>回答by Balkrushn
- 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
- 将一个 div 放在一个带有属性 id 图片的主体中，例如
<div id="picture"></div> 将 img 标签附加到 div
//code success : function(data) { var returnData = jQuery.parseJSON(data); $("#picture").append("<img src=\" + returnData.img_url + "\" />"); }); //code if any
回答by Ringo
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{}
});
