I use ShowImage() method of the Home controller to show the image generated on fly.

HTML

<img src='@Url.Action("ShowImage", "Home" )' width="267" height="500">

Now I would like to execute some action with AJAX and update that image like this

 $.ajax({
     type: "POST",
     url: '@Url.Action("UpdateUser", "Home")',
     contentType: "application/json; charset=utf-8",
     data: JSON.stringify(params),
     dataType: "json",
     success: function (data) {
         if (data.success.toString() == 'true') {

             // Is it possible update image using JavaScript?


         }
     }
 });

Is it possible to do? Thanks!

I use ShowImage() method of the Home controller to show the image generated on fly.

HTML

<img src='@Url.Action("ShowImage", "Home" )' width="267" height="500">

Now I would like to execute some action with AJAX and update that image like this

 $.ajax({
     type: "POST",
     url: '@Url.Action("UpdateUser", "Home")',
     contentType: "application/json; charset=utf-8",
     data: JSON.stringify(params),
     dataType: "json",
     success: function (data) {
         if (data.success.toString() == 'true') {

             // Is it possible update image using JavaScript?


         }
     }
 });

Is it possible to do? Thanks!

• c#
• javascript
• ajax
• asp-mvc
• image

• 1 Yes just change src attribute $("#myimage").attr("src", yourReponse") – Adriien M Commented Jul 3, 2014 at 11:52
• what is returned by ajax call? – Ehsan Sajjad Commented Jul 3, 2014 at 11:52
• I assume, that your link to image isn't changing, is it? Check this link for help: stackoverflow./questions/2104949/… – Paweł Reszka Commented Jul 3, 2014 at 11:53
• @EhsanSajjad In fact I can return byte[] of image as well. But I dont know if it will help somehow... – NoWar Commented Jul 3, 2014 at 11:53
• 1 also @ClarkKent show the ajax call response what is returned from server – Ehsan Sajjad Commented Jul 3, 2014 at 11:54

3 Answers 3

Your controller can return an Image with the base File method:

public ActionResult Image(string id)
{
     var myStream = new byte[0];
     // your code géneration....
     return File(myStream, "image/jpeg");
}

Than, you change the image src attribute:

$("#image").attr("src", "/MyController/Image/2");

Add an id to your image:

<img id="anImage" src='@Url.Action("ShowImage", "Home" )' width="267" height="500">

Then in your success handler set it as follows:

$('#anImage').attr("src", 'success.png');

If your image is returned as json from your controller, pull it from the data instead:

$('#anImage').attr("src", data.image);

Try this for pure javascript

document.getElementById("id of ur img").src="your source goes here";