Question

我正在使用bootstrap carousel，因为我想在每次点击事件后动态加载图片。

第一张图片正确显示但后面的数据来自服务器，但是ajax脚本无效。

HTML

<div id="myCarousel" class="carousel slide" data-ride="carousel">
   <!-- Indicators -->
   <!-- Wrapper for slides -->
   <div class="carousel-inner" role="listbox" id="listbox">
     <div class="item active" id="gallery-overlay">
       <img src="" alt="taufik">
     </div>
   </div>

   <!-- Left and right controls -->
   <a class="left carousel-control" id="pre" href="#myCarousel" role="button" data-slide="prev">
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
   </a>

   <a class="right carousel-control" id="nxt" href="#myCarousel" role="button" data-slide="next">
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true" id="nxt"></span>
     <span class="sr-only" >Next</span>
   </a>
</div>

的Ajax

$(document).ready(function() {
   $('#nxt').click(function() {
      $.ajax({
        url : 'DisplayImage',
        data : {
          opration : 'next',
          username : 'user1'
        },
        success : function(result) {
          $('#gallery-overlay').append('<li><img src="data:image/jpeg;base64,'+result+'"/></li>');
        }
      });
    });
  });

Answer 1

尝试以下内容，因为您收到了返回的结果。看起来好像你已经在你的base 64代码前添加数据：image / jpeg; base64，结果也是返回它。

//split the result by the , and get the actual base64 data
$('#gallery-overlay').append('<li><img src="data:image/jpeg;base64,'
+ result.split(",")[1] +'"/></li>');

如何动态显示ajax中的图像？

1 个答案: