javascript - 使用 JavaScript 从 JSON 文件获取图像并在 HTML img 标签中显示

Question

我真的不确定我在这里做错了什么。我的代码对我来说很有意义，但我想我只是一个初学者。看起来很简单，但我却想不通。任何帮助都会很棒，请并谢谢您。

请阅读代码注释以了解我正在尝试执行的操作的规范。

JSON 代码:

{"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>

Answer 1

创建一个 Image 对象(具有所需的属性)并将其添加到现有的 div

var data = {
  "images": [{
    "bannerImg1": "/image/HXS1E.png?s=32&g=1"
  },
  {"bannerImg1" : "/image/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>