ASP.NET MVC: How to Display a Byte Array Image from Model

ASP.Net MVC: How to display a byte array image from model

Something like this may work...

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

<img src="@imgSrc" />

As mentioned in the comments below, please use the above armed with the knowledge that although this may answer your question it may not solve your problem. Depending on your problem this may be the solution but I wouldn't completely rule out accessing the database twice.

ASP.NET MVC image from byte array

You could define a controller action that will serve the image:

public class ImagesController: Controller
{
    public ActionResult Index(int id)
    {
        byte[] imageData = ... go get your image data from the id
        return File(imageData, "image/png"); // Might need to adjust the content type based on your actual image type
    }
}

and in your view simply point the src property of the img tag to this controller action:

<img src="@Url.Action("Index", "Images", new { id = Model.Id })" />

Convert Byte Array to image and display in Razor View

Like this:

<img src="@Url.Action("getImg", "Person", new { id = item.Id })" alt="Person Image" />

You need Url.Action and not Html.Action because you just want to generate an url to the GetImg action. Html.Action does something entirely different.

Cannot render byte[] as an Image in MVC 5 ASP.Net

I figured out that it is not easy the convert Nortwind image to format base64 string. I found a source. According to explanation, "Northwind images were created with Microsoft Access so they have a 78 byte OLE header". So, we should remove the headers. Firstly, modify Category entity.

public partial class Category
{
    public int CategoryID { get; set; }

    [Required]
    [StringLength(15)]
    public string CategoryName { get; set; }

    [Column(TypeName = "ntext")]
    public string Description { get; set; }

    [Column(TypeName = "image")]
    public byte[] Picture { get; set; }

    [NotMapped]
    public string Base64String
    {
        get
        {
            var base64Str = string.Empty;
            using (var ms = new MemoryStream())
            {
                int offset = 78;
                ms.Write(Picture, offset, Picture.Length - offset);
                var bmp = new System.Drawing.Bitmap(ms);
                using (var jpegms = new MemoryStream())
                {
                    bmp.Save(jpegms, System.Drawing.Imaging.ImageFormat.Jpeg);
                    base64Str = Convert.ToBase64String(jpegms.ToArray());
                }
            }
            return base64Str;
        }
    }
}

And then put the Base64String property inside img attribute.

<img src="@String.Format("data:image/jpg;base64,{0}", item.Base64String)" />

Display byte[] array image from database in Details page template using ASP.NET MVC

Why I'm getting a null value in the first case?

You cannot pass a byte array to the server in an <img> tag. The <img> tag simply sends a GET request to the designated resource. The correct way to do this is to use an id:

<img src="@Url.Action("RenderPhoto", new { photoId = Model.PhotoId })" />

and then:

public ActionResult RenderPhoto(int photoId)
{
    byte[] photo = FetchPhotoFromDb(photoId);
    return File(photo, "image/jpeg");
}

Binding Image in ASP.NET MVC4 from a byte array

Your str looks like it is already base64, so you don't need to dance to binary and back. You can just stick it in the view where it should be.

Decoding that string from base64 revealed that it is not an image, it's a pdf file.
So your api (3d party, I guess) serves you not an image.

And lastly to successfully use an image like that you probably need to specify mime type like this <img src="data:image/png;base64,some text representation of binary data" />

http://en.wikipedia.org/wiki/Data_URI_scheme

---

Related Topics