I can not return an image file and show it in View using Ajax in Asp.net MVC

Question

$.ajax({
                    type: 'GET',
                    dataType: 'image/jpeg',
                    url: '/Home/GetImage/' + img , 
                    success: function (data) {
                        i = new Image();
                        i.src = data;
                        $('#imageresult').append(i);
                    },
                    error: function () {
                        alert('error'); 
                    },
});


[HttpGet]
public ActionResult GetImage(string img)
{
   string imageFile = System.Web.HttpContext.Current.Server.MapPath("~/Profile/Small/" );
   var path = Path.Combine(imageFile, img );  
   var srcImage = Image.FromFile(path);
   var stream = new MemoryStream();
   srcImage.Save(stream, ImageFormat.Jpeg);

   return File(stream.ToArray(), "image/jpeg");
}

It always falls into error function. If i remove dataType, then it doesn't fall into error function but it just shows long strings in the view. Why doesn't that work and show image in view?

Why aren't you using GET instead of POST? Agre, if you are using POST i think you need send some data. — Fabio Silva Lima
– Fabio Silva Lima, Commented Nov 1, 2016 at 9:45
Try to send only bytearray then get the image in view. return Json(stream.ToArray()); — SᴇM
– SᴇM, Commented Nov 1, 2016 at 9:51
I think the wrong here is on your attribute on controller is HttpPost,but your ajax call type is GET.One more thing why dataType: 'image/jpeg',you are passing a string only — Navoneel Talukdar
– Navoneel Talukdar, Commented Nov 1, 2016 at 9:52

SᴇM · Accepted Answer · 2016-11-01 10:16:03Z

1

You can do something Like this:

public ActionResult GetImage(string img)
{
   string imageFile = System.Web.HttpContext.Current.Server.MapPath("~/Profile/Small/" );
   var path = Path.Combine(imageFile, img );  
   var srcImage = Image.FromFile(path);
   var stream = new MemoryStream();
   srcImage.Save(stream, ImageFormat.Jpeg);

   return Json(Convert.ToBase64String(stream.ToArray()), JsonRequestBehavior.AllowGet);
}

and the Ajax call:

$.ajax({
        type: 'GET',
        url: '@Url.Action("GetImage", "Home")',
        success: function (data) {
            $("#ItemPreview").attr('src', 'data:image/png;base64,' + data);
        },
        error: function () {
            alert('error');
        },
    });

and the view:

<img id="ItemPreview" src="" />

of course you can append img dynamically, then bind its source after.

answered Nov 1, 2016 at 10:16

SᴇM

7,2433 gold badges28 silver badges43 bronze badges

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

Comments

Peter B · Accepted Answer · 2016-11-01 10:03:46Z

0

You are confusing the URL of an image with its actual content (the graphic bytes).

The /GetImage call returns the bytes, but you can never put data bytes in the i.src attribute because that attribute needs to be fed a URL.
It might work if you forget about the Ajax call and just use i.src = '/Home/GetImage/' + img;.

answered Nov 1, 2016 at 10:03

Peter B

24.7k5 gold badges42 silver badges94 bronze badges

Collectives™ on Stack Overflow

I can not return an image file and show it in View using Ajax in Asp.net MVC

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related