ヘッダーを設定するには画像を呼び出すURLに

Question

この前に、ヘッダーのないURLでイメージを呼び出しました。それは次のようになります。

javascriptの

$scope.image = "http://my.address"; 

HTML

その後

<img ng-src="{{image}}"> 

、私は、ヘッダーに画像を取得しようとしました：

だから、

headers: { 
    'x-access-token': 'token' 
} 

、私のjavascriptはliを見ますKEこの：

$http({ 
    method: 'GET', 
    timeout: 25000, 
    url: "http://my.address", 
    headers: { 
    'x-access-token': 'token' 
    } 
}) 

.success(function (data) { 
    $scope.image = data; 
}) 

.error(function (error) { 
    //Error handling 
}); 

その後

javascriptのは、結果が実際の画像を表示していなかった私のhtmlです。 白い空白の画像のみを示しています。

Answer 1

私は角を知らないが、$httpは、単純なXHRラッパーではないでしょうか？

この場合、dataは、HTMLImageのsrc属性では理解できない画像の生データである必要があります。この属性はURIのみを受け入れます。
the docsを信頼すればにあるXHRのresponseTypeオプションを使用してこれを回避できます。

その後

$http({ 
    method: 'GET', 
    timeout: 25000, 
    url: "http://my.address", 
    headers: { 
    'x-access-token': 'token' 
    }, 
    responseType: 'blob' // request a Blob instead of raw data 
}) 

.success(function (blob) { 
    $scope.image = URL.createObjectURL(blob); // create a temp URI for this Blob 
}) 

.error(function (error) { 
    //Error handling 
}); 

のようなものは、トリックを行う必要があります。

Answer 2

ng-srcにはURLが必要ですが、生のイメージを与えるので、これで何をするのか分かりません。イメージの先頭にdata:[<mime type>][;charset][;base64],<Data>を追加する必要があります。そのため、ng-srcは何をするべきかを知っています。

例：データ：画像/ PNG形式、kjbaskljbasd4dd64ad464d6a ... kajbkjbd8ad76

$scope.image = "data:image/png," + data; 

Answer 3

NG-SRCの値が補間されます。あなたがそうのような二重の中括弧で囲む必要があります。

<img ng-src="{{image}}"> 

Working demo