显示来自 ajax 的图像 src

Question

通过以下代码请求 img src 的路径：$.ajax({  url: 'api/catalogs.php?action=fetchimg&CatalogId=' + d.CategoryId,  type: 'GET',  dataType: "json",  success: function(response) {    var path = response.path;    console.log(path);    $.each(response, function(key, value) {      $("#images").attr('src', value.path);    })  },});但是代码只显示一张照片，API 返回多张照片并且需要显示所有照片。为了显示我使用下面的代码。return '<div class="container">'+        '<div class="row justify-content-center text-center my-3"></div>'+    '<div class="row justify-content-center text-center">'+        '<div class="col-md-4 mb-3">'+            '<img id="images" src="" class="img-fluid img-thumbnail"></a>'+        '</div>'+    '</div>'+'</div>';

Answer 1

您的代码仅编辑一张图片 src。你应该在你success的$.ajax

$.each(response, function(key, value){

    $("body").append($("<img>", { src: value.path } ));

})

这将为响应中的每个路径添加一个图像到正文。然后您可以开始根据您的要求修改它

Answer 2

最后，见下文

 $.ajax({

          url: 'api/catalogs.php?action=fetchimg&CatalogId='+d.CategoryId, 

          type: 'GET',

        dataType: "json",

        success: function(response) {                

          var images = "";

          $.each(response, function(key, value){

            images+='<div  class="col-md-4 mb-3">'+                                 

            '<img src="'+value.path+'" class="catalog-image img-responsive thumbnail"></a>'+

            '</div>';

          })

          $('#photos').html(images);

          },

在 HTML 上面的代码插入到下面的 div 中：

<div class="container">

            <div id="photos" class="row justify-content-right text-right my-3"></div>

        <div  class="row justify-content-right text-right">

        </div>

</div>

Answer 3

因为您对所有元素 (#images) 使用相同的 ID。你需要让它像 ('#images' + counter); 添加计数器一样动态化。

同样的事情需要在 HTML 中改变。