通过JavaScript在CSHTML上显示byte []中的图像

问题描述

我正在使用数据库中的数据创建一个时间轴页面，并且希望在View中显示该对象的图像。 Get方法可以正常工作，当它返回var imgSrc时，它从转换为base64的字节数组中接收数据，但是当我尝试在其中使用var时，检查页面时它显示为未定义。

有人可以帮我解决这个问题吗？

$.getJSON("../ReportsAuditsTimeLine/GetAuditsResultbyAudit",{ AuditID: ID },function (data) {
        
             var datafromaudit = '';
             var div = document.createElement('div');
             $('#timeLine').empty();

             for (var i = 0; i < data.length; i++)
             {
                 var base64 = "";
                 var imgSrc = "";

                 if (data[i].AUDIT_PICTURE != null)
                 {
                     //CHECK IMAGE

                     try {
                         base64 = Convert.ToBase64String(data[i].AUDIT_PICTURE);
                         imgSrc = String.Format("data:image/png;base64,{0}",base64);
                         console.log("Imagem:",imgSrc);
                         
                     }
                     catch (Exception) {

                     }
                     //END IMAGE
                    
                 }

                 if (data[i].AUDIT_ITEM_STATUS == "PASS") {
                     if (data[i].AUDIT_PICTURE != null) {
                         datafromaudit += '<li><i class="fa fa-camera bg-green"></i> ' +
                                     '<div class="timeline-item">' +
                                     '<span class="time">' +
                                     '</span>' +
                                     '<h3 class="timeline-header"><b>ID:' + data[i].ID + "  - " + data[i].DESCRIPTION +
                                        '</b></h3>' +
                                      '<div class="timeline-body"> WEIGHT:       <b>' + data[i].OD + '</b>      STATUS:     <b style=color:green;>' + data[i].AUDIT_ITEM_STATUS + '</b>' + '<img src="' + $.imgSrc + '"class="margin" ></img>' + ' </div>' +
                                      '<div class="timeline-footer"/>'
                         '</div></li>'
                     }
                     else
                     {
                         datafromaudit += '<li><i class="fa fa-pencil-square-o bg-green"></i> ' +
                                     '<div class="timeline-item">' +
                                     '<span class="time">' +
                                     '</span>' +
                                     '<h3 class="timeline-header"><b>ID:' + data[i].ID + "  - " + data[i].DESCRIPTION +
                                        '</b></h3>' +
                                      '<div class="timeline-body"> WEIGHT:       <b>' + data[i].OD + '</b>      STATUS:     <b style=color:green;>' + data[i].AUDIT_ITEM_STATUS + '</b>'  + ' </div>' +
                                      '<div class="timeline-footer"/>'
                         '</div></li>'
                     }
                 }

}

控制器

 [AcceptVerbs(HttpVerbs.Get)]
        public JsonResult GetAuditsResultbyAudit(string AuditID)
        {
            
                var viewmodel = new ReportsAuditTimeLineviewmodel();
                int auditID = Int32.Parse(AuditID);
                var auditResults = viewmodel.GetAuditsResultbyAudit(auditID);
                return Json(auditResults,JsonRequestBehavior.AllowGet);            

        }

viewmodeL

 public List<AuditsResultData> GetAuditsResultbyAudit(int AuditID)
        {
            var list = new List<AuditsResultData>();


            var context = new OnlineAuditsEntities();
                using (context)
                {
                    var query = from audits in context.tb_Audits
                                join i in context.tb_AuditItem on audits.AUDIT_ITEM_ID equals i.ID                               
                                join a in context.tb_Audit on audits.AUDIT_ID equals a.ID                                
                                join s in context.tb_Audit_ItemStatus on audits.STATUS_ID equals s.ID
                                
                                where audits.AUDIT_ID == AuditID
                                select new { audits,i,a,s};
                    foreach (var s in query)
                    {
                    var Photo = (from pic in context.tb_AuditPictures
                                   where pic.AUDIT_ID == s.audits.ID
                                   select  pic.PICTURE).FirstOrDefault();
                        if (Photo!=null)
                        {
                            list.Add(new AuditsResultData
                            {
                                ID = s.audits.ID,AUDIT_ITEM_ID = s.audits.AUDIT_ITEM_ID,DESCRIPTION = s.i.SUBCATEGORY_DESCRIPTION,HASFIND = s.i.HAS_FINDING ?? false,FINDS = s.audits.FINDINGS ?? 0,STATUS_ID = s.audits.STATUS_ID,AUDIT_ITEM_STATUS = s.s.STATUS_DESCRIPTION,OD = s.audits.OD ?? 0,COMMENTS = s.audits.COMMENTS,SCANS = s.audits.SCANNED_CODE,AUDIT_ID = s.audits.AUDIT_ID,AUDIT_PICTURE = Photo

                            });

                        }
                    }
                }        
            
            return list;
      
        }

解决方法

您应该从控制器传递图片以以Base64String的形式查看。然后将其转换为图片，如下所示：

var picture = "data:image/jpg;base64," + data.base64image;