如何动态显示来自 ajax 的图像？

Question

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

第一个图像显示正确，但后记数据来自服务器，但 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 代码前面添加了 data: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 的图像？

how to display images from ajax dynamically?

ajax

jquery

carousel

bootstrap-modal