AngularJS 如何将返回的图像数据设置为图像的 ng-src
How to set returned Image Data as ng-src of image in AngularJS
目前我有两个 ASP.Net 核心方法 - 一个与 API 调用相关,另一个与客户端 Razor 助手相关。
它们都位于我的 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");
}
剃须刀:
这是 Razor 助手:
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
:
剃须刀:
这是网络选项卡中的 Razor Helper 调用 preview
:
API:
这是“网络”选项卡中的 API 调用 headers
:
剃须刀:
这是网络选项卡中的 Razor Helper 调用 headers
:
API:
为什么 Razor 助手实际上是 produce/return 图像,而 API 调用却不是?我怎样才能使 API 调用 return 像 Razor 助手那样的图像?
你需要的东西不多。首先,您不应该直接在 Angular Controller 中访问 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>
其次,您需要return base64 编码字符串。
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));
}
}
}
对于此修复,我使用了:
Request.CreateResponse(HttpStatusCode.OK, "data:image/png;base64," + Convert.ToBase64String(response.GetBuffer()))
目前我有两个 ASP.Net 核心方法 - 一个与 API 调用相关,另一个与客户端 Razor 助手相关。
它们都位于我的 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");
}
剃须刀:
这是 Razor 助手:
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
:
剃须刀:
这是网络选项卡中的 Razor Helper 调用 preview
:
API:
这是“网络”选项卡中的 API 调用 headers
:
剃须刀:
这是网络选项卡中的 Razor Helper 调用 headers
:
API:
为什么 Razor 助手实际上是 produce/return 图像,而 API 调用却不是?我怎样才能使 API 调用 return 像 Razor 助手那样的图像?
你需要的东西不多。首先,您不应该直接在 Angular Controller 中访问 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>
其次,您需要return base64 编码字符串。
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));
}
}
}
对于此修复,我使用了:
Request.CreateResponse(HttpStatusCode.OK, "data:image/png;base64," + Convert.ToBase64String(response.GetBuffer()))