Requesting path for img src via below code:
$.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);
})
},
});
But code displaying only one photo, API returning many photos and need to display all. For displaying I am using below code.
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>';
Your code is only editing one image src. You should do something like this in your success
in $.ajax
$.each(response, function(key, value){
$("body").append($("<img>", { src: value.path } ));
})
This will add an image to the body for each of the paths in your response. Then you can start modifying this to your requirements
Because you are using the same ID for all elements (#images). You need to make it dynamic like add counter with it like ('#images' + counter);
and the same thing needs to change in HTML.
Finally, see below
$.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);
},
in HTML above code inserting into below 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>