說明

後臺返回圖片二進位制流，需要使用get請求獲取返回結果，並且將返回的二進位制流以圖片形式顯示在頁面img中。
但是日常顯示圖片都諸如這種形式：

<img src="圖片路徑、地址" alt="" />

以上需求不能將後端地址直接填入src（原因是需要獲取圖片請求的headers中欄位）

問題

後端返回圖片驗證碼，返回驗證碼的請求中的headers有一個Captcha-ETag:caf9f71eb9f511e78e41020563146d69，登入請求帶上它用來做驗證碼校驗。
所以，只能在get請求獲取，不能直接用直接img填寫圖片地址的方法。

解決

幾個關鍵點：
- responseType

注意那個blob就是這種方案需要的responseType

• createObjectURL
  URL.createObjectURL() 靜態方法會建立一個 DOMString，其中包含一個表示引數中給出的物件的URL。這個 URL 的生命週期和建立它的視窗中的 document 繫結。這個新的URL 物件表示指定的 File 物件或 Blob 物件。

objectURL = URL.createObjectURL(blob);

• revokeObjectURL
  在每次呼叫 createObjectURL() 方法時，都會建立一個新的 URL 物件，即使你已經用相同的物件作為引數建立過。當不再需要這些 URL 物件時，每個物件必須通過呼叫 URL.revokeObjectURL() 方法來釋放。瀏覽器會在文件退出的時候自動釋放它們，但是為了獲得最佳效能和記憶體使用狀況，你應該在安全的時機主動釋放掉它們。

window.URL.revokeObjectURL(objectURL);

createObjectURL()方法，是接收一個檔案的引用返回一個URL物件。這是通知瀏覽器來建立和管理一個URL來載入檔案。 revokeObjectURL()方法，則是銷燬建立的URL，有效果釋放記憶體。當然，所有的URL物件將在瀏覽器重新載入時全部被銷燬，也有助於釋放它們佔用的記憶體。

最後demo：

URL 變數是原生瀏覽器物件的一個引用，假設瀏覽器支援URL物件，URL通過file建立一個物件賦值給imageUrl變數。 元素的onload 事件觸發後將銷燬URL 物件(一分鐘內)，接著，給src屬性賦值後將追加到頁面上（你也可以使用一個頁面上已有的元素的）。

要及時銷燬URL物件，除非你有多個file需要使用，所以圖片載入完銷燬它是最佳記憶體釋放時機。

var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","http://10.10.0.62:10001/api/charge/admin/v1/image/code",true);
xmlhttp.responseType = "blob";
xmlhttp.onload = function(){
    console.log(this);
    if (this.status == 200) {
        var blob = this.response;
        var img = document.createElement("img");
        img.onload = function(e) {
            window.URL.revokeObjectURL(img.src); 
        };
        img.src = window.URL.createObjectURL(blob);
        document.body.appendChild(img); 
    }
}
xmlhttp.send();

瀏覽器顯示：

<img src="blob:null/bccc301d-f2cd-4871-9349-daaac181d722">