從ajax響應設置圖像src

Question

我想在我的頁面中設置一個圖像src與我從ajax調用響應收到的圖像，但當我設置圖像src與響應時，我得到一個破碎的圖像圖標。

下面

是Ajax調用

$.ajax({ 
         url: '<%=request.getContextPath() %>/rest/tasks/file/'+temp_taskID+'?fileType=JPG' + 
          '&fileName='+imgNames[i], 
         headers: { 
          'apiKey':'1xxxx3-dde5-4eec-b3ee-2xxxx507xxe8', 
          'ID':ID 
         }, 
         type: "GET" 
        }) 
        .done (function(data, textStatus, jqXHR) { 
         $("#img_carousel").attr("src", "data:image/jpeg;base64," + data);     
        }) 
        .fail (function(jqXHR, textStatus, errorThrown) {}); 

錯誤

Answer 1

解決發現我的問題

https://stackoverflow.com/a/25371174/3518278

不得不添加MIME類型

mimeType: "text/plain; charset=x-user-defined", 

和

$("#img_carousel").attr('src', 'data:image/jpeg;base64,' + base64Encode(data)); 

function base64Encode(str) { 
       var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/"; 
       var out = "", i = 0, len = str.length, c1, c2, c3; 
       while (i < len) { 
        c1 = str.charCodeAt(i++) & 0xff; 
        if (i == len) { 
         out += CHARS.charAt(c1 >> 2); 
         out += CHARS.charAt((c1 & 0x3) << 4); 
         out += "=="; 
         break; 
        } 
        c2 = str.charCodeAt(i++); 
        if (i == len) { 
         out += CHARS.charAt(c1 >> 2); 
         out += CHARS.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4)); 
         out += CHARS.charAt((c2 & 0xF) << 2); 
         out += "="; 
         break; 
        } 
        c3 = str.charCodeAt(i++); 
        out += CHARS.charAt(c1 >> 2); 
        out += CHARS.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4)); 
        out += CHARS.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6)); 
        out += CHARS.charAt(c3 & 0x3F); 
       } 
       return out; 
      }