如何设置返回图像数据作为AngularJS图像的NG-SRC(How to set returned

我有两个ASP.Net核心方法的时刻 - 一个绑定到API调用，并对一个绑在客户端的剃刀帮手。

他们都位于我HomeController.cs 。

API：

这里的API调用：

[HttpGet("api/GetImage")]
public async Task<ActionResult> ImageFromPath()
{
    RestClient client = new RestClient("http://IPADDRESS/cgi-bin/snapshot.cgi?channel=0");
    RestRequest request = new RestRequest(Method.GET);
    request.AddHeader("cache-control", "no-cache");
    request.AddHeader("authorization", "Basic aYu7GI");
    TaskCompletionSource<IRestResponse> taskCompletion = new TaskCompletionSource<IRestResponse>();

    RestRequestAsyncHandle handle = client.ExecuteAsync(request, r => taskCompletion.SetResult(r));
    RestResponse response = (RestResponse)(await taskCompletion.Task);

    return File(response.RawBytes, "image/png");
}

剃刀：

这里的剃刀帮手：

public async Task<ActionResult> ImageFromPath()
{
    RestClient client = new RestClient("http://IPADDRESS/cgi-bin/snapshot.cgi?channel=0");
    RestRequest request = new RestRequest(Method.GET);
    request.AddHeader("cache-control", "no-cache");
    request.AddHeader("authorization", "Basic aYu7GI");
    TaskCompletionSource<IRestResponse> taskCompletion = new TaskCompletionSource<IRestResponse>();

    RestRequestAsyncHandle handle = client.ExecuteAsync(request, r => taskCompletion.SetResult(r));
    RestResponse response = (RestResponse)(await taskCompletion.Task);

    return File(response.RawBytes, "image/png");
}

正如你所看到的，方法体上面是完全一样的 。一个简单的有HttpGet注解。

然而，当他们的客户端处理配对，它们会产生不同的结果。

API：

对于API调用客户端的处理程序：

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

$http.get('/api/GetImage', { headers: { 'Accept': 'image/webp,image/apng,image/*,*/*;q=0.8' } }).then(function (response) {
    $scope.imageSrc = response.data;
});

剃刀：

Razor的助手客户端处理程序：

<img src="@Url.Action("ImageFromPath")" id="img2" />

在此处，结果显示：

API：

这里的API调用preview在网络标签：

剃刀：

这里的剃刀助手呼吁preview在网络标签：

API：

这里的API调用headers在网络标签：

剃刀：

这里的剃刀助手呼吁headers在网络标签：

API：

为什么剃刀帮手实际产生/回的图像，但API调用不？我怎么能做出API调用返回就像剃刀辅助函数的图像？

你需要几件事情。首先，你不应该直接角控制器内访问DOM。

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<div ng-app="app">
    <my-content></my-content>
</div>
<script type="text/javascript">
    angular.module('app', []);

    angular.module('app')
        .component('myContent', {
            template: '<h1>{{$ctrl.title}}</h1><img src="{{$ctrl.imageSrc}}" />',
            controller: function ($http) {
                var self = this;
                self.title = "Title";
                // Just to verify image work
                //self.imageSrc = "https://i.stack.imgur.com/hM8Ah.jpg?s=48&g=1";
                $http.get('/Home/ImageFromPath').then(function (response) {
                    console.log(response.data);
                    self.imageSrc = response.data;
                });
            }
        });
</script>

其次，你需要返回based64编码字符串。

using System;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using RestSharp;

namespace DemoWebCore.Controllers
{
    public class HomeController : Controller
    {
        public async Task<IActionResult> ImageFromPath()
        {
            RestClient client = new RestClient("https://i.stack.imgur.com/hM8Ah.jpg?s=48&g=1");
            RestRequest request = new RestRequest(Method.GET);
            request.AddHeader("cache-control", "no-cache");
            request.AddHeader("authorization", "Basic aYu7GI");
            TaskCompletionSource<IRestResponse> taskCompletion = new TaskCompletionSource<IRestResponse>();
            RestRequestAsyncHandle handle = client.ExecuteAsync(request, r => taskCompletion.SetResult(r));
            RestResponse response = (RestResponse)await taskCompletion.Task;
            return Ok("data:image/png;base64," + Convert.ToBase64String(response.RawBytes));
        }
    }
}