[英]how to retrieve image from webapi url folder using angular js?
我是angular js的新手。 我正在為我的公司使用angular js的現有項目。 我想知道如何使用angular js檢索webapi項目文件夾中的圖像。 該webapi被聲明為post方法,我需要在我的html視圖上獲取用戶的圖像。 我已經創建了webapi邏輯,但是當談到Angular js時,我被卡住了,不知道如何去做。
以下是我的Web API發布方法
[AcceptVerbs("POST")]
[Route("profile/{userid}/")]
public byte[] GetScreenshot(string userid)
{
var imgPath = string.Format("{0}/{1}.png", Common.AppHelper.FolderPathProfilePicture, userid);
if (!File.Exists(imgPath))
{
imgPath = string.Format("{0}/no.png", Common.AppHelper.FolderPathDeviceScreenshot);
if (!File.Exists(imgPath))
imgPath = System.Web.Hosting.HostingEnvironment.MapPath("~/doc/thumbnail") + "\no.png";
if (!File.Exists(imgPath))
return null;
}
return File.ReadAllBytes(imgPath);
}
這是我的html頁面
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<span class="glyphicon glyphicon-pencil" style="margin-top: 7px;"></span>
<div class="pull-right" style="margin-top: 5px;">
<span class="text-info" data-ng-bind-html="accountLoginName | to_trusted" style="font-size: 12px;"></span>
<!-- image must show at this img src -->
<img src="" alt="" class="img-responsive img-circle" style="height: 25px; width: 25px; border-radius: 50% !important;" /> <span class="caret"></span>
<ul class="dropdown-menu">
<li><a ng-click="popupProfilePictureControl.showPopup(loginAccount)">Change profile picture</a></li>
<li><a href="#">Change corporation</a></li>
<li><a href="#">Change password</a></li>
<li class="divider"></li>
<li><a href="#">Help</a></li>
<li><a href="#">Support</a></li>
<li class="divider"></li>
<li><a href="#logout">Logout</a></li>
</ul>
</div>
</div>
我不知道如何使用angular js從我的webapi中檢索圖像。 請指導我。
您可以使用圖像的Base64字符串,只需將返回值替換為string即可:
return Convert.ToBase64String(File.ReadAllBytes(imgPath));
在Web API結果之后的JS中(使用jquery):
$(".img-responsive img-circle").attr("src",dataBase64Str);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.