如何使用 Angular js 从 webapi url 文件夹中检索图像？

Question

我是 Angular js 的新手。我正在为我的公司开发一个使用 Angular js 的现有项目。我想知道如何使用 Angular js 检索我的 webapi 项目文件夹中的图像。 webapi 被声明为 post 方法，我需要在我的 html 视图上获取用户的图像。我已经创建了 webapi 逻辑，但是当谈到 angular js 时，我被卡住了，不知道该怎么做。

下面是我的web 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>

我不知道如何使用 angular js 从我的 webapi 中检索图像。请指导我。

Answer 1

你可以使用Base64字符串的图像，只需将返回值替换为字符串：

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

在 Web api 结果后的 JS 中（使用 jquery）：

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