Unable to display an image from database in asp.net view

Question

I don't know why, but I am not able to display an image from my database in my view. It appears in the right resolution for the image, but it's basically transperant. I am not sure if something in the way I save the image is wrong(shouldn't be) or if it's something with displayin it. I am sorry if my question is too basic, but I am stuck on this more than I have to be:(

here is a screenshot of the problem :

attr value : src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADhCAYAAAByfIirAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAANL5JREFUeNrsnQl8VNXZ/8/MZJIJ2UMWIAkJCWFLwhpWAQEBKasoBkUUEBBpq7Xaoi34V2yp/PU="

Here'how my model looks :

    public int CompId { get; set; }
    public byte[] ImageData { get; set; }
    [NotMapped]
    public HttpPostedFileBase UploadImage { get; set; }
    [NotMapped]
    public string ImageBase64 => System.Convert.ToBase64String(ImageData);
    public string CompanyName { get; set; }
    public string CompanyAddress { get; set; }

Action method :

public ActionResult Create([Bind(Include = "CompId,ImageData,CompanyName,CompanyAddress,CompanyCountry,CompanyCity,CompanyPostalCode,CompanyPhoneNumber,EmailCA")] Company company, HttpPostedFileBase UploadImage)
        {
            if (ModelState.IsValid)
            {
                byte[] buf = new byte[UploadImage.ContentLength];
                UploadImage.InputStream.Read(buf, 0, buf.Length);
                company.ImageData = buf;

                db.Companies.Add(company);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            return View(company);
        }

And the view :

 @model eksp.Models.Company

@{
    ViewBag.Title = "Index";
}

<h2>Details</h2>

<div>
    <h4>Company</h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.ImageData)
        </dt>

        <dd>
            <img src="data:image/png;base64,@Model.ImageBase64" />
        </dd>

Any help will be appreciated.

Examine the resulting HTML page source: do you see what is expected in that img src attribute value? — uncoder
– uncoder, Commented Jan 6, 2017 at 20:40
Also, put a breakpoint in cshtml and check @Model.ImageData array. Do you have some data there? — Alexei - check Codidact
– Alexei - check Codidact, Commented Jan 6, 2017 at 20:41

Darin Dimitrov · Accepted Answer · 2017-01-06 20:47:09Z

3

Guess what the value you have shown is:

src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADhCAYAAAByfIirAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAANL5JREFUeNrsnQl8VNXZ/8/MZJIJ2UMWIAkJCWFLwhpWAQEBKasoBkUUEBBpq7Xaoi34V2yp/PU="

Surprise: 300x225 empty PNG image (with a transparent background):

So make sure that you put some real images in your database if you expect to see them rendered in the browser. Otherwise all you will get in the browser is a 300x225 pixels emptiness (which is exactly what we are seeing from your screenshot).

This being said, your code is fine, it's the data you are working with that is making you think that there's a problem.

answered Jan 6, 2017 at 20:47

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Robert Ross Over a year ago

I will try to reupload the image. p.s здрасти :д

Darin Dimitrov Over a year ago

Just make sure to upload some more visible image :-)

Robert Ross Over a year ago

Yes, thanks for this. It worked now. I don't know how this happend :D

Collectives™ on Stack Overflow

Unable to display an image from database in asp.net view

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related