Question

这是以json形式获取数据的代码，它看起来像这样

＆＃13;

function json2array() {

  var data = {"images": [

  "https:\/\/outpan-images.s3.amazonaws.com\/rg6j1l9iqd-0078915030900.jpg",

  "https:\/\/outpan-images.s3.amazonaws.com\/835ggkjjq0-0078915030900.png",

  "https:\/\/outpan-images.s3.amazonaws.com\/8fn652ptobh3ecw886.jpg",

  "https:\/\/outpan-images.s3.amazonaws.com\/26naopw9flteq3qrcs.jpg",

  "https:\/\/outpan-images.s3.amazonaws.com\/uhqq6sdj47-0078915030900.jpg"

]};

  var keys = Object.keys(data);

  keys.forEach(function(key) {

    result.push(data[key]);



  });

  $("#myElement #images").append($('<img>', {
    src: result[key]
  }));

  //  return result;

}

＆＃13;

<div class="container-fluid" id="myElement">
    <img id="images"> </img>
</div>

＆＃13;

Answer 1

您可以使用.each()中的jQuery功能，如下所示。

$.each(data.images, function(index, element) {
    alert(element); 
});

恕我直言，因为你还附加了返回的图像，你应该同样命名这个函数，以免后来出现混淆。

所以你的功能变成了

function appendReturnedImages(data) {

  $.each(data.images, function(index, element) {
    $("#myElement #images").append($('<img>', {
      src: element
    }));
  });
}

您要追加的DOM元素也是img，因为img不能包含其他img，您必须将其设为div，如下所示。

<div class="container-fluid" id="myElement">
 <div id="images"> </div>
</div>

编辑： - 由于我没有返回的JSON数据集，我没有机会测试我的解决方案，但它应该可以工作，只是尝试摆弄一点，如果它没有。

Answer 2

请检查这个小提琴：https://jsfiddle.net/cjkfgjv9/

要动态更改图像元素的src，请使用此jQuery语法：

$(selector).attr('src', imageUrl);

使用jQuery显示来自JSON的多个图像

2 个答案: