通过 javascript 在 HTML 中显示来自字节 [] 的图像

Question

我正在使用来自数据库的数据创建一个时间线页面，并且我想在视图中显示来自对象的图像。 方法 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);            

        }

视图模型

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

Answer 1

您应该将图片作为 Base64String 从控制器传递给视图。然后将其转换为图片：

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