MVC FileContentResult for Image returns binary to screen

Question

This is a head scratcher. I have code that works great in one project. I am reusing it in another and it doesn't work. Not sure what I missed. I am trying to return an image from my MVC controller to an image control. Method is:

public ActionResult ScannedImage(ImageSideIndicator side)
    {
        try
        {
            ScannedItemViewModel model = (ScannedItemViewModel)Session["selectedItem"];

            String imagePath = side.ImageSide == 1 ? model.Item.FrontImagePath : model.Item.RearImagePath;
            byte[] image = CA.ImageStreamer.Image.FromFile(imagePath, System.Drawing.Imaging.ImageFormat.Jpeg);
            if (image == null)
            {
                return File(ImageNotFound(), "image/png");
            }
            else if (image.Length == 0)
            {
                return File(ImageNotFound(), "image/png");
            }

            model = null;
            return File(image, "image/jpeg");
        }
        catch (Exception ex)
        {                
            return File(ImageNotFound(), "image/png");
        }
    }

And the image control is:

img id="imgCheckImage" class="imageBorder" style="max-height:100%;max-width:100%" alt="Check Image" src="Scan/ScannedImage?ImageSide=@Model.ImageSide&cachePreventer=@DateTime.Now.Millisecond"

When the image comes back the image control writes out the binary instead of the image. Like I said this works fine in another project. Did I forget something?

score 0 · Accepted Answer · answered Apr 20 '16 at 16:08

Turns out I was skipping the intermediate step of requesting the partial view that contained my image control and was directly requesting the image binary, and that's exactly what I got. So i changed:

 $.ajax({
        url: '@Url.Action("ScannedImage", "Scan")',
        type: 'POST',
        dataType: 'html',
        cache: false,
        data: { ImageSide: currentSide },
        success: function (data, status, xhr) {
            if (SessionTimedOut(data)) {
                RedirectToLogin();
                return;
            }
            $('#divPanZoomImage').html(data);
        },
        error: function (xhr, status, error) {
            alert(error);
        }
    });

To:

 $.ajax({
        url: '@Url.Action("ShowScannedImage", "Scan")',
        type: 'POST',
        dataType: 'html',
        cache: false,
        data: { ImageSide: currentSide },
        success: function (data, status, xhr) {
            if (SessionTimedOut(data)) {
                RedirectToLogin();
                return;
            }
            $('#divPanZoomImage').html(data);
        },
        error: function (xhr, status, error) {
            alert(error);
        }
    });

Where ShowScannedImage returned a PartialViewResult that contained the image control which then requests the binary.

MVC FileContentResult for Image returns binary to screen

1 Answers1