각도 설정 이미지로드시 헤더

Question

서버에 인증 할 모든 요청의 HTTP 헤더에 특수 값을 설정해야합니다.

나는 다음과 같은 코드가 있습니다 JSON에 대한

<img ng-if="content.image" src="{{img(content.image)}}"> 

및

var app = angular.module('myApp', []); 
app.config(['$httpProvider', function($httpProvider) { 
    $httpProvider.defaults.headers.common['Authorization'] = 'myKey'; 
}]) 
app.controller('customersCtrl', function($scope, $http) { 
    $http.get("http://localhost:8080/myPath") .then(function(response) { 
     $scope.content = response.data; 
    }); 

모든 것이 잘 작동 요청을하지만 난 이미지와 strugle. 나에게 힌트가 있습니까? 'XMLHttpRequest의'에 'setRequestHeader를'을 실행하지 못했습니다 : 당신은`setRequestHeader를()`은`개방()`호출하기 전에, 는`catch되지 않은 InvalidStateError있을 것를 넣으면

Answer 1

은 내가

// Image returned should be an ArrayBuffer. 
var xhr = new XMLHttpRequest(); 

    //set Authorization Header 
    xhr.setRequestHeader("Authorization", 'myKey'); 
xhr.open("GET", "https://placekitten.com/500/200", true); 

// Ask for the result as an ArrayBuffer. 
xhr.responseType = "arraybuffer"; 

xhr.onload = function(e) { 
    // Obtain a blob: URL for the image data. 
    var arrayBufferView = new Uint8Array(this.response); 
    var blob = new Blob([ arrayBufferView ], { type: "image/jpeg" }); 
    var urlCreator = window.URL || window.webkitURL; 
    var imageUrl = urlCreator.createObjectURL(blob); 
    var img = document.querySelector("#photo"); 
    img.src = imageUrl; 
}; 

xhr.send();