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, Jul 03 '14 at 11:52
I assume, that your link to image isn't changing, is it? Check this link for help: http://stackoverflow.com/questions/2104949/how-to-reload-refresh-an-elementimage-in-jquery — Paweł Reszka, Jul 03 '14 at 11:53
@EhsanSajjad In fact I can return byte[] of image as well. But I dont know if it will help somehow... — NoWar, Jul 03 '14 at 11:53
also @ClarkKent show the ajax call response what is returned from server — Ehsan Sajjad, Jul 03 '14 at 11:54

Adriien M · Accepted Answer · 2014-07-03T11:58:26.023

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 03 '14 at 11:58

answered Jul 03 '14 at 11:52

Adriien M

1,165
7
6

1

This is the complete answer, but I already commented once below your question ;) – Adriien M Jul 03 '14 at 12:04
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? – eaglei22 May 17 '17 at 20:55

hutchonoid · Answer 2 · 2014-07-03T11:59:37.250

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 03 '14 at 11:59

answered Jul 03 '14 at 11:53

hutchonoid

32,982
15
99
104

score 0 · Answer 3 · answered Jul 03 '14 at 11:58

0

Try this for pure javascript

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

answered Jul 03 '14 at 11:58

Unknownman

473
3
9

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

3 Answers3