MVC 3 Image not being loaded

Question

I have an image upload in my form:

    @using (Html.BeginForm("Create", "Application", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Application Under Testing</legend>

        <div class="editor-label">
            Image
        </div>
        <div class="editor-field">
            @if (Model.AppDetails.Image == null)
            {
                @:None
            } else {
                <img width="400" src="@Url.Action("GetImage", "Application", new { Model.AppDetails.ID })" />   
            }
            <div>Upload new image: <input type="file" name="Image" /></div>
        </div>
     </fieldset>
     }

This submits it, and it gets saved into database using:

    [HttpPost]
    public ActionResult Create(ApplicationViewModel vm, HttpPostedFileBase image)
    {
        if (ModelState.IsValid)
        {
            if (image != null)
            {
                vm.AppDetails.ImageMimeType = image.ContentType;
                vm.AppDetails.Image = new byte[image.ContentLength];
                image.InputStream.Read(vm.AppDetails.Image, 0, image.ContentLength);
            }

            _repository.SaveEntity<AUT>(vm.AppDetails);

            return RedirectToAction("Index");
        }

        return View(vm);
    }

So, now I have an action which gets the image out of the database for displaying:

    public FileContentResult GetImage(Guid appID)
    {
        var app = _repository.AUTs.FirstOrDefault(x => x.ID.Equals(appID));
        if (app == null)
        {
            return null;
        }

        return File(app.Image, app.ImageMimeType);
    }

In my view I have this code to show the image:

    <td>
        @if (item.Image == null)
        {
            @:None
        } else {
            <img width="100" src="@Url.Action("GetImage", "Application", new { item.ID })" />   
        }
    </td>

The output on the web page is this:

<img width="100" src="/Validation/Application/GetImage/bd3fdb5b-8d73-48e2-a04e-1a49a73729be">

This isn't displaying an image. EDIT: I've actually inspected the element on Chrome, and it has 2 errors (1 for each image) stating: Error 500 Internal Server Error. And it shows the url for the getimage, is it worth using a fully qualified url? or something?

So my guess is, it either isn't saving the right data in the database, or the correctly reading the data into image format. Or somewhere my code is wrong.

Any thoughts?

--- EDIT ---

I have run unit tests on this to see if I can retrieve the image. The test came back passed.

So, it must be something to do with rendering it on the client side, because the server side seems to run fine. Chrome shows the error to be: 500 Internal Server Error.

Have you debugged your code? What happens in the `GetImage` method? Does it find the image? — nemesv, Mar 18 '13 at 11:29
Well thats the thing, i've tried putting breakpoint in get image, it doesn't get hit... — Callum Linington, Mar 18 '13 at 11:30
This might help: http://stackoverflow.com/questions/8474822/displaying-database-image-bytes-in-razor-mvc3 — Vimal Stan, Mar 18 '13 at 11:41
Yeah, can't be shown, I used Chrome "inspect an element", but from what i can understand, it is supposed to show the action url, and the img should just render the data. The only problem is I can't debug the action.... — Callum Linington, Mar 18 '13 at 12:53

score 0 · Answer 1 · answered Mar 18 '13 at 12:47

0

Have you verified that the file is actually coming across? I had a similar situation recently and ended up using Request.Files to get to the posted files.

answered Mar 18 '13 at 12:47

Brian P

1,569
13
23

Could you expand on this, how did you use the Request? – Callum Linington Mar 18 '13 at 12:48
Yes the image does get to the server. And the images are in the database as really big long hex numbers – Callum Linington Mar 18 '13 at 12:50
If the image gets to the server, then this is notyour problem. – Brian P Mar 18 '13 at 12:51
How did you display this image to your users? – Callum Linington Mar 18 '13 at 12:53

score 0 · Accepted Answer · answered Mar 18 '13 at 13:32

So, I have found the answer to this problem, and stops call backs to the server:

<img width="100" src="data:@item.ImageMimeType;base64,@(Convert.ToBase64String(item.Image))" />

Is there any problems using this, like backwards compatability with older browsers? Or are there any other reason why I shouldn't use this?

This way means that I don't have to query the database again for the image.

MVC 3 Image not being loaded

2 Answers2