首页 > 解决方案 > 如何使用 ngResource 从 WebAPI 获取图片以显示使用 ng-src

问题描述

我正在使用带有 Angular 客户端的 WEBAPI(带有 [Autorize])。

我正在尝试使用从 webapi 发送的图像:


public HttpResponseMessage Document(string file)
{
string bestand = file.ToLower();
var path = @"C:\Temp\"+file;
HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
var stream = new FileStream(path, FileMode.Open, FileAccess.Read);
result.Content = new StreamContent(stream);
result.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("image/jpg");
result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
{
    FileName = file
};
return result;
}

在角度:

$scope.getFile = function (file) 
{
compassResource.get({ 'Method': "document", "Type": file }, 
    function (data) {// success
    console.log(data);
    var blob = new Blob([data]);
    blob.name = file;
    blob.lastModifiedDate = new Date();
    console.log(blob);
    return blob;

}, function (error, status) { // failure
    console.log('fout jpg');
    console.log(error);
    console.log(status);
});
$scope.image = $scope.getFile('test.jpg');

在 HTML 中:

   <img ng-src="{{image}}" alt="user image" />

我确实收到了数据,但从那时起我不知道如何继续。我已经尝试了几件事。我将 ngResource 与 OidcManager 和不记名令牌一起使用。但是即使使用 $http 我确实收到了数据(并且使用了令牌!!),但是我应该如何处理数据以使图像可见。

谢谢

标签: javascriptangularjsimageweb-servicesngresource

解决方案


推荐阅读