AngularJS /离子显示图像从API

我试图通过第三方来源的Web API将我的Ionic应用程序加载到我的Ionic应用程序，但它无法显示。我接收该响应包含针对我认为是一个字节数组数据和这样开始的PNG数据：AngularJS /离子显示图像从API

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