Question

我从数据库中获得了一堆图像，这是一个JSON文件。我无法在HTML页面上显示所有图像。我只能在该页面上显示一张图像。我在下面附加了我的代码。有人帮我

      success:function(data){
                    $.each(data, function(index, element) {

                    $('.serachImg').attr("src","/image/"+element.filename);
             });
           },

这是我的HtML代码

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

任何想法都会帮助我解决这个问题

Answer 1

$('.serachImg').attr("src","/image/"+element.filename);-这将更新dom中已存在的单个图像的attr。

相反，您将需要append 新图像到dom中的容器元素（如div）。因此，您想要做类似$('.product-img').append($('<html elements...><img src=yourImgSrc /></html content>'))

的操作

Answer 2

$.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)
});

这有点棘手，但是如果没有视图库或没有创建和附加每个元素，这是最容易遵循的方法，我自己不会做。

如何显示所有图像

2 个答案: