ASP.NET MVC4,Angular Js 开发之显示图片

ASP.NET   MVC4是属于后台开发语言，Angular JS属于前端开发框架。但两者设计思想有很多相似之处。两者搭配起来，就更相得益彰。

看过很多在MVC4中显示图片处理的方法，但与Angular Js搭配起来并不感觉舒服。所以查过资料后，这里介绍一种在两者一起使用时的简洁操作方法。

首先，我的图片是以二进制字节（图片很小）存储在数据库的表中。在MVC框架的Action中，字节从数据库中获取数据，将其转换为Base64字符串编码。如下：

 public JsonResult GetIdentityInfoBy(string lastSixIdWord)
        {
            var identityDatas = ArchiveService.IdentityManager.LoadBy(lastSixIdWord);
            if (identityDatas != null && identityDatas.Count > 0)
            {
                identityDatas.ForEach(m =>
                {
                    //将个人的图片信息转换为Base64字符串编码保存到此属性中
                    m.NewAddress = Convert.ToBase64String(m.PersonalPicture);
                });
            }
            return Json(identityDatas, JsonRequestBehavior.AllowGet);
        }

在前端通过Angular JS的Ajax获取Json格式的数据，并将其绑定到图片上，如下：

<img ng-src="data:image/jpg;base64,{{archive.identityInfo.pic}}" />

操作比较简单，暂时实现功能了。具体还没有深入研究这样的利与弊。但先实现功能为主。