从服务器获取图片，显示到页面上显示[object HTMLImageElement]

如题，```javascript
function downloadImg(url){
window.URL = window.URL || window.webkitURL;
console.log(window.URL);
if (typeof history.pushState == "function") {
var xhr = new XMLHttpRequest();
xhr.open("get", url, true);
xhr.responseType = "blob";
xhr.onload = function() {
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.getElementsByClassName("avator")[0].innerHTML=img ;   

                }  

            }  

            xhr.setRequestHeader("Accept", "image/png");  
            xhr.setRequestHeader("Authorization", "Bearer "+client.getToken());  
            xhr.send();  
        }   

}

avator对应位置显示“[object HTMLImageElement]” ，而不是图片，为什么会这样呢，  这个在pc端是ok的啊 ，求解