如何使用angular js從webapi url文件夾中檢索圖像？

我是角js的新手。我正在爲我的公司使用角度js的現有項目。我想知道如何使用角度js檢索webapi項目文件夾中的圖像。 webapi被聲明爲post方法，我需要在我的html視圖中獲取用戶的圖像。我已經創建了webapi邏輯，但是當涉及角js時，我被困住了，並且不知道如何去做。如何使用angular js從webapi url文件夾中檢索圖像？

下面是我的網頁API POST方法

[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;" />&nbsp;<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>

我不知道如何使用角度JS從檢索圖像我的WebAPI。請引導我。

來源

2017-05-19 Mohamad Arafat

您能將圖像變成角度變量？例如，您成功調用POST，您只是不知道如何處理返回的字節？或者你有麻煩調用POST來獲取圖像？ – Aaron

我在打電話時遇到了麻煩。我不知道該叫什麼名字。 –

在一項服務中。 W3Schools *非常*基本介紹：https：//www.w3schools.com/angular/angular_services.asp ...然後爲一個更真實的世界：http://stackoverflow.com/questions/29780147/how-to- return-image-from-http-get-in-angularjs – Aaron

你也許可以使用圖像的Base64編碼字符串，只是字符串替換返回值：

return Convert.ToBase64String(File.ReadAllBytes(imgPath));

在JS

後網頁API的結果（這使用jQuery）：

$(".img-responsive img-circle").attr("src",dataBase64Str);

來源

2017-05-19 14:20:08 NguyenN

他的問題似乎是在調用web api POST，而不是進入HTML。他需要服務$ http調用。 – Aaron

如何使用angular js從webapi url文件夾中檢索圖像？

回答

相關問題