How to update image with JavaScript and ASP.NET MVC?

Question

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!

Yes just change src attribute $("#myimage").attr("src", yourReponse") — Adriien M
– Adriien M, 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.com/questions/2104949/… — Paweł Reszka
– 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
– NoWar, Commented Jul 3, 2014 at 11:53
also @ClarkKent show the ajax call response what is returned from server — Ehsan Sajjad
– Ehsan Sajjad, Commented Jul 3, 2014 at 11:54

Adriien M · Accepted Answer · 2014-07-03 11:58:26Z

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");

edited Jul 3, 2014 at 11:58

answered Jul 3, 2014 at 11:52

Adriien M

1,1857 silver badges6 bronze badges

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

2 Comments

Adriien M Over a year ago

This is the complete answer, but I already commented once below your question ;)

eaglei22 Over a year ago

I am confused on how this is the accepted answer as the OP was asking for help using AJAX to change image. This seems to only show how to load image with page load, how do you refresh with AJAX and JSON?

hutchonoid · Accepted Answer · 2014-07-03 11:59:37Z

3

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);

edited Jul 3, 2014 at 11:59

answered Jul 3, 2014 at 11:53

hutchonoid

33.4k15 gold badges102 silver badges106 bronze badges

Comments

Unknownman · Accepted Answer · 2014-07-03 11:58:42Z

0

Try this for pure javascript

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

answered Jul 3, 2014 at 11:58

Unknownman

4833 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to update image with JavaScript and ASP.NET MVC?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related