How to get byte [] to display as a background image for a div in a view (C #, ASP.NET, MVC)

Question

I am building a C # and ASP.Net web application with MVC infrastructure. My application is running on my local desktop (for now). The application has an SQL backend in which all my data is stored. I can get data from SQL db successfully using several stored procedures. Data can be successfully transferred from stored procedures up to my presentation from the controller.

Part of the data passed to the view is a byte [] from the image stored in db (data type VARBINARY (MAX)). In short, I'm trying to get data from this byte [] to display as a background image in a div. This div acts as a single image in the Bootstrap carousel.

At first, I had the following as a 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);
        }

My thought process was what I would just call n.Picture in my opinion, and that would make the image. After several attempts and tutorials, later I left n.Picture as a byte [] and processed it in my own ActionResult method, as shown below:

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

I will call it in my opinion as follows:

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

selectedOfficial is a reference to the model installed in the controller (pfp).

Is there something I am missing?

EDIT 1

, div null, . , div . Url.Action, , . Html.Action, . null , , nulls arent .

2 div :

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

{} , . , . , .

Answer 1

byte[] , :

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

, FileContentResult, , HTML.

, URL- src HTML-, . , ElectedOfficialID FileContentResult .

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

Answer 2

base64 , PictureAsString, Picture

n.PictureAsString =  Convert.ToBase64String(pictureByteArray)

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

Answer 3

use a handler (ASHX). and the url of the call handler in src.

public class MyHandler : IHttpHandler
  {
   public void ProcessRequest(HttpContext context)
   {
      //Get Id from somewhere

      //Get binary data

      context.Response.ContentType = "application/octet-stream";
      context.Response.BinaryWrite(bytes);
   }
 }

Answer 4

You can convert an array of bytes to an image as follows:

• Convert an array of bytes to a base64 string.
• Display it in the tag <img>.

Here is the code:

@{
    var base64 = Convert.ToBase64String(Model.ByteArray);
    var imgSrc = String.Format("data:image/gif;base64,{0}", base64);
}

<img src="@imgSrc" />