APIからのAngularJS/Ionic表示画像

サードパーティのソースからWeb APIを使用してIonicアプリにPNG画像を読み込もうとしていますが、表示に失敗しています。私が受け取る応答は、私はバイト配列のデータであると信じるPNGのためのデータが含まれており、このように始まる：APIからのAngularJS/Ionic表示画像

PNG IHDRRl PHY ....

これが開始します次のAPI呼び出しを行うことにより：

function getImage(authToken) { 
    var settings = { 
    "async": true, 
    "crossDomain": true, 
    "url": imgLocation, 
    "method": "GET", 
    "headers": { 
     "auth-token": authToken, 
     "cache-control": "no-cache" 
    } 
    } 
    return $http(settings) 
    .then(function(response) { 
     return response; 
    }) 
    .catch(function(e) { 
     return e.data; 
    }); 
}

その後、私のコントローラの内部で「画像」変数に適用されたデータ

$scope.image = response.data;

私は、私はここで見つけるのBase64エンコード/デコード使用して、base64文字列にデータを変換しますhttps://stackoverflow.com/questions/246801/how-can-you-encode-a-string-to-base64-in-javascript

をそして最後に、私のHTMLの中に、私はこれがあります。

<img ng-src="data:image/PNG;base64,{{image}}">

を結果は画像が表示される場所の空のボックスで、壊れた画像リンクではありません。私はStackoverflowで見つかった様々なソリューションを試してきましたが、私は固執するものは何も得られません。

$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|ftp|blob):|data:image\//);

...と私のindex.htmlに：だから、もう一度

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *; img-src 'self' data: *">

が、私はPNG画像をロードしようとしていますまた、私は私の設定では、次のものがないことに注意すべきです私のアプリにAPIコールを介して。私は画像のバイト配列表現を受け取っていると思うが、私はそれをbase64に変換しようとすると、画像は読み込まれません。さらに、私はコンソールにエラーを受けていません。

誰かが私にいくつかの洞察力を提供できるなら、大きな助けになるでしょう、感謝します。

出典

2016-08-16 user2980520

私はまた、唯一の予想とまったく同じ出力を得るために）「ブロブ」オブジェクトにデータを入れた後、window.FileReader（からそれを読み取ろうとしました。しかし、画像はまだ正しく表示されません。 – user2980520