0

i am a newbie of angular js. I am working on an existing project that using angular js for my company. I would like to know how to retrieve an image that is inside my webapi project folder using angular js. The webapi is declared as post method and i need to get the image of the user on my html view. I have created the webapi logic but when comes to angular js i am stucked and have no idea on how to do it.

Below is my web api post method

 [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);
    }

this is my html page

 <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>

I have no idea how to use the angular js to retrieve the image from my webapi. Kindly guide me.

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Mohamad Arafat
  • 573
  • 1
  • 5
  • 24
  • Are you able to get the image into a variable in angular? For example, you successfully call the POST, you just don't know what to do with the returned bytes? Or are you having trouble calling the POST to get the image? – Aaron May 19 '17 at 14:13
  • I am having trouble when calling the post. I don't know where to call it. – Mohamad Arafat May 19 '17 at 14:14
  • 2
    In a service. W3Schools for *very* basic intro: https://www.w3schools.com/angular/angular_services.asp ... and then for a more real world: http://stackoverflow.com/questions/29780147/how-to-return-image-from-http-get-in-angularjs – Aaron May 19 '17 at 14:15

1 Answers1

0

You can maybe use Base64 string of image, just replace the return value by string : 

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

in JS after web api result (this using jquery) : 

$(".img-responsive img-circle").attr("src",dataBase64Str);
NguyenN
  • 1
  • His issue seems to be in calling the web api POST, not in getting into HTML. He needs the service $http call. – Aaron May 19 '17 at 14:25