asp.net-mvcimagefilecontentresult

MVC FileContentResult for Image returns binary to screen


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?


Solution

  • 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.