Question

我正在尝试通过来自第三方来源的网络API将PNG图像加载到我的Ionic应用程序中，但它无法显示。我收到的响应包含PNG的数据，我认为它是一个字节数组数据，并且开始如下：

PNGIHDR R lpHY....

首先进行以下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;
    }); 
}

然后将数据应用于我的控制器内的'image'变量

$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: *">

所以再一次，我试图通过API调用将PNG图像加载到我的应用程序中。我相信我正在接收图像的字节数组表示，但是当我尝试将其转换为base64时，图像不会加载。另外，我在控制台中没有收到任何错误。

如果有人能给我一些见解，那将会非常有帮助，谢谢。

Answer 1

你的答案有一个主题。你必须从你的对象创建一个fileurl并使它具有角度信任。至于pdf，您应该能够使用img标签将{{fileURL}}添加到html中，如示例所示。

AngularJS: Display blob (.pdf) in an angular app

AngularJS / Ionic显示来自API的图像

1 个答案: