displaying image from Database using ajax

Question

I was just wondering if it possible to make an ajax request from a view to an action which injects image data directly in to an image tag.

To give more details, i am borrowing some code in stackoverflow.

Controller;

public FileResult GetImage(int id)
{
  return File(PhotoHelper.GetImageBytes(id), "image/jpeg");
}

View:

<%= Html.Image("img", "/Photos/GetImage?id=" + Model.Photo.Id.ToString(), "BioPic", new { Width = "350px" })%>

Is it possible to load another another image from GetImage(int ID) using ajax?

Answer 1

If you place the image in a partial view which includes the code you have to show the image, then in your controller you can do something like return RenderPartial("imagectrl", Model.Photo.Id.ToString());

I think that should work fine.

It's untested but I think that's how I implemented the same sort of thing.

Answer 2

Any HttpRequest that routes to the GetImage() method will produce a jpeg image. If you dynamically create another image tag using javascript and set it's src attribute to "/Photos/GetImage?id=x" another HttpRequest will be made to this controller, and another image will be created.

EDIT: You tagged jquery in your post, so here's the jquery for something like this:

var newImage = $('<img />');
newImage.attr('src', '/Photos/GetImage?id=' + someIntegerHere);
$('#mycontainer').append(newImage);