javascript - 显示来自 json 结果类型的图像数据

Question

这是我的获取操作方法，用于获取带有图像的帖子:

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

这是显示用户名及其图片的 View 页面，但我无法显示图片:

       <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

如何解决这个问题？？？

Answer 1

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

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

更新:正如你所说，这应该有效。

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