Angular：顯示來自REST服務的圖像

經過研究和測試...我仍然無法在我的Angular App上顯示ReST API的圖像。我的ReST Web服務上有可用的圖像，爲什麼要使用ReST服務？因爲訪問你需要進行身份驗證（我使用oAuth 2協議），那麼......當我使用POSTMan（ReST客戶端非常有用）時，一切都很好，圖像顯示時不會無所事事。但是，當我嘗試用$ HTTP它不工作后角，以顯示它...Angular：顯示來自REST服務的圖像

下面是收到的報頭格式的服務：

的Content-Length→51756 內容類型→圖像/ JPEG;字符集=二進制服務器→阿帕奇/ 2.4.9（Win64中）PHP/5.5.12 X供電，通過→PHP/5.5.12

這裏是我的角碼：

var data64 = $base64.encode(unescape(encodeURIComponent(data))); 
scope.src = 'data:image/jpeg;charset=binary;base64,' + data64;

和我HTML：

<img ng-src="{{src}}" border="0" />

有關信息，我使用angular-base64（https://github.com/ninjatronic/angular-base64）作爲編碼。如果沒有「UNESCAPE」和「encodeURIComponent方法」我有一個錯誤，我試圖刪除空格，但它仍然無法正常工作......

謝謝:)

來源

2015-07-21 Nico

你爲什麼不直接把REST-URL放入ng-src？ – wero

你好，因爲我需要添加標題，就像我說的我使用OAuth協議，所以我需要添加一些標題和一個標記... – Nico

明白了。你的標題表示它是一個'image/jpeg'，但你的數據字符串以''/ image'開頭。爲什麼包含'charset = binary'？ – wero

看來，這不會因爲工作你告訴瀏覽器圖像數據是base64編碼的，但你也用unescape和encodeURIComponent轉換它。

你爲什麼不獲取圖像數據轉換成二進制數據結構（需要一個現代瀏覽器），而不是爲一個字符串：

$http.get(req, {responseType: "arraybuffer"}). 
    success(function(data) { 
     $scope.src = 'data:image/jpeg;base64,' + _arrayBufferToBase64(data); 
    });

_arrayBufferToBase64定義here。

一種不同的方法是安裝請求攔截器，識別圖像的URL，並添加OAuth的頭對於這種情況。

來源

2015-07-21 12:40:18 wero

不錯！ :)它爲我工作。我將測試瀏覽器的兼容性（它適用於Chrome）謝謝 – Nico

Angular：顯示來自REST服務的圖像

回答

相關問題