如何動態顯示ajax圖片？

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> 

阿賈克斯

$(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>');