I get bunch of images from database which is a JSON file. i couldn't display all images on HTML page. I can only display one image on that page. I attached my code below. Anyone give me a hand
success:function(data){
$.each(data, function(index, element) {
$('.serachImg').attr("src","/image/"+element.filename);
});
},
This is my HtML Code
<div class="row" id="search-img-list" style="display:none">
<!-- Single Product -->
<div class="col-12 col-sm-6 col-lg-4" id="single_product">
<div class="single-product-wrapper">
<!-- Product Image -->
<div class="product-img">
<a class="route" href="">
<img class="serachImg" src="" alt=""> <- I want to display here
</a>
</div>
</div>
</div>
</div>
Any idea would be helped me out from this problem
$('.serachImg').attr("src","/image/"+element.filename); -- this will update the attr of the single image that's already in the dom.
Instead, you'll want to append new images to a container element (like a div) in the dom. So, you'd like want to do something like $('.product-img').append($('<html elements...><img src=yourImgSrc /></html content>'))
$.each(data, function(index, element) {
var img = `<div class="col-12 col-sm-6 col-lg-4" id="single_product">
<div class="single-product-wrapper">
<div class="product-img">
<a class="route" href="">
<img class="serachImg" src="/image/${element.filename}" alt="">
</a>
</div>
</div>
</div>`
$('someSelector').append(img)
});
this is a bit hacky, but without a view library or creating and appending each element,this is the easiest to follow, I would never do this myself.