c# - 如何让 byte[] 显示为 View 上 div 的背景图像(C#、ASP.NET、MVC)

Question

我正在使用 MVC 框架在 C# 和 ASP.Net 中构建 Web 应用程序。我在我的本地桌面上运行了该应用程序(目前)。该应用程序有一个 SQL 后端，用于存储我的所有数据。我能够通过许多存储过程成功地从 SQL 数据库中提取数据。数据能够成功地从存储过程一直传输到 Controller 的我的 View 。

传输到 View 的部分数据是来自存储在数据库中的图像的 byte[](数据类型为 VARBINARY(MAX))。简而言之，我试图从这个 byte[] 中获取数据以在 div 中显示为背景图像。此 div 在 Bootstrap 轮播中充当单个图像。

最初，我将以下内容作为我的 Controller :

public ActionResult Dashboard()
        {            
            DashboardViewModelHolder holder = new DashboardViewModelHolder(); 
            DiscoveryService discoveryService = new DiscoveryService(); 
            holder.national_Elected_Officials = new List<National_Elected_Officials_Model>(); 
            National_Elected_Officials_Model n = new National_Elected_Officials_Model();                   
            foreach (List<object> official in discoveryService.retrieve_National_Elected_Officials())
            {                
                for(int i = 0; i <= official.Count; i++)
                {                    
                    int id = int.Parse(official.ElementAt(0).ToString()); 
                    string fname = official.ElementAt(1).ToString();
                    string lname = official.ElementAt(2).ToString();
                    byte[] pictureByteArray = (byte[])official.ElementAt(3);
                    string position = official.ElementAt(4).ToString();
                    string party = official.ElementAt(5).ToString();
                    string bio = official.ElementAt(6).ToString();
                    int yearsOfService = int.Parse(official.ElementAt(7).ToString());
                    int terms = int.Parse(official.ElementAt(8).ToString());
                    string branch = official.ElementAt(9).ToString();                   

                    Image picture = image_Adapter.byteArrayToImage(pictureByteArray);                              

                    n.ElectedOfficialID = id;
                    n.FirstName = fname;
                    n.LastName = lname;
                    n.Picture = picture;
                    n.Position = position;
                    n.Party = party;
                    n.Bio = bio;
                    n.YearsOfService = yearsOfService;
                    n.Terms = terms;
                    n.Branch = branch; 
                }
                holder.national_Elected_Officials.Add(n);                
            }
            return View(holder);
        }

我的想法是，我只需在我的 View 中调用 n.Picture，它就会渲染图片。经过几次尝试和教程之后，我将 n.Picture 保留为 byte[] 并在其自己的 ActionResult 方法中对其进行处理，如下所示:

public FileContentResult Image(byte[] pictureByteArray)
        {            
            return new FileContentResult(pictureByteArray, "image/jpeg");
        }

在我看来，我这样调用它:

<div class="fill" style="background-image:src(@Url.Action("Image", electedOfficial.Picture))"></div>

electedOfficial 是对在 Controller (n.Picture) 中设置的模型的引用。

有什么我想念的吗？

编辑 1

我忘了补充一点，当我调试并逐步执行代码时，div 会返回 null。这是因为在调试时永远不会调用带有 div 的行。如果我将它设置为 Url.Action，程序实际上会在到达线路之前转到 Controller 。如果我执行 Html.Action，程序将跳过该行并转到 Controller 。两者都将返回 null 作为结果，这会在 Controller 端返回一个错误，因为 null 是不允许的。

编辑 2我尝试将 div 标记更改为以下内容:

<div class="fill" style="background-image:src(@{Html.Action("Image", electedOfficial.Picture);})"></div>

通过将 {} 放入调试器中，实际上会在我单步执行时解析该行。现在，问题是 Controller 没有收到从 electedOfficial.Picture 传递给它的值。只是为了确认，这个变量确实在 View 中保存了正确的值。

Answer 1

如果您的模型中有完整的 byte[]，那么您可以将数据直接放入 View 中:

<div style="background:url( data:image/jpeg;base64,@Convert.ToBase64String(electedOfficial.Picture) )"></div>

这将在不需要返回 FileContentResult 的单独 Controller 的情况下工作，但初始页面加载时间会更长，因为用户将下载所有图像以及页面 HTML。

如果您想使用 Controller 端点，以便图像可以在 src 属性中作为 URL 引用并在 HTML 呈现后下载，那么您就离得太远了。让 Controller 接受 ElectedOfficialID 并从中返回 FileContentResult 会更好。

  public FileContentResult Image(int electedOfficialId)
  {            
      byte[] picture = GetPicture(electedOfficialId);
      return new FileContentResult(picture, "image/jpeg");
  }