显示json结果类型的图像数据

时间:2015-12-03 17:20:46

标签: javascript jquery json asp.net-mvc

这是我的获取操作方法来获取带有图片的帖子:

       public JsonResult GetPosts()
        {
          var ret = (from post in db.Posts.ToList()
                   orderby post.PostedDate descending
                   select new
                   {
                       PostedByName = post.ApplicationUser.UserName,
                       PostedByAvatar = _GenerateAvatarUrlForUser(post.PostedBy),
                   });
          return Json(ret, JsonRequestBehavior.AllowGet);
         }

这是我的GetFileData操作方法,用于从数据库中检索图像:

      public FileResult GetFileData(int fileId)
      {
        var file = db.Files.Single(x => x.FileId == fileId);
        return File(file.Content, file.ContentType);
       }

这是生成url的方法:

     private string _GenerateAvatarUrlForUser(int? Id)
     {
        var avatarImage = db.Files.SingleOrDefault(s => s.ApplicationUserId == Id);
        if (avatarImage != null)
            return Url.Action("GetFileData", new { fileId = avatarImage.FileId });
        return String.Empty;
      }

这是用他们的图片显示用户名的视图页面,但我无法显示图片:

       <div>
       <div id="ajaxDiv">
       </div>
       </div>

     <script type="text/javascript">
     $(document).ready(function () {
     $.getJSON("/Post/GetPosts", null, function (data) {
     var div = $('#ajaxDiv');
     div.html("<br /> " + "Users received from server: " + "<br />");
     $.each(data, function (i, item)
     {
      printUser(div, item);
      });
     });
    });
 function printUser(div, item)
 {
     div.append("<br/>" + "UserName: " + item.PostedByName + "<br/>" + "Pic: " + item.PostedByAvatar);
   // I am stuck here on how to append image to this div or how to pass item.PostedByAvatar to this img src tag
     div.append("<img src= + item. />");
     <img src="@Url.Action("GetFileData", "Home", new { id = item.Id })" style="width:100px;height:100px;"/>
   }
 </script>

我成功回归的网址是这样的:

   /Post/GetFileData?fileId=2

如何解决这个???

1 个答案:

答案 0 :(得分:1)

GetFileData操作中fileId中的参数名称。但是,当您设置图像源时,您使用的参数名称id应该是fileId,如下所示。

@Url.Action("GetFileData", "Home", new { fileId = item.Id })

更新:正如您所说,这应该有用。

div.append('<img class=cssClassName src="' + item.PostedByAvatar +'"/>');