Question

在此之前，我已经使用没有标题的URL调用图像。它看起来像这样：

的javascript

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

HTML

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

然后，我尝试使用标题获取图像：

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

所以，我的javascript看起来像这样：

的javascript

$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
});

然后，结果是我的html没有显示实际图像。它仅显示白色空白图像。

Answer 1

插入ng-src的值。你需要用双花括号括起来：

.table td, .table th { 
    border: none !important; 
}

Working demo

Answer 2

我不知道角度，但不是$http一个简单的XHR包装器？

如果是这样，data应该是图像的原始数据，HTMLImage的src属性无法理解。此属性仅接受URI 您可以使用XHR的responseType选项绕过此问题，如果我们信任the docs，也会出现在$http中。

然后像

$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 3

ng-src需要一个url，但你给它一个原始图像，所以它不知道如何处理它。您需要在图像的开头添加data:[<mime type>][;charset][;base64],<Data>，以便ng-src知道如何处理它。

示例：data：image / png，kjbaskljbasd4dd64ad464d6a ... kajbkjbd8ad76

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

如何在URL中设置标题以调用图像

3 个答案: