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

Display image data from json result type

本文关键字：图像 数据 类型 json 结果 显示      更新时间：2023-09-26

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

       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

如何解决这个问题？？？

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

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

更新：正如您所说，这应该有效。

div.append('<img class=cssClassName src="' + item.PostedByAvatar +'"/>');
相关文章：