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.

Answer 1

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.

Answer 2

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.