Question

Controller to get an image:

public class PicturesSmallController : Controller
{
  public ActionResult Details(int id)
  {
    PictureSmallManager m = new PictureSmallManager();
    PictureSmall p = m.Load(id);
    ImageFormat imageFormat = ImageHelper.ConvertToImageFormat(p.ContentType);
    return p.Trunk != null ? File(p.Trunk, p.ContentType) : null;
  }
}

and a view:

<script type="text/javascript">
  $(document).ready(function () {
  var picsSmall = $('#picturesSmall');
  picsSmall.toggle();
  var url = '@Url.Action("Details", "PicsSmall")';
  var ai = {
    id: 69
  };
  $.ajax({
    type: "POST",
    url: url,
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(ai),
    success: function (returndata) {
        picsSmall.append($('<img/>', {
          src: returndata,
          alt: 'some text'
        }));
      select.show('slow');
    }
  }
 );
});
</script>
<div id="picturesSmall"></div>
<div id="picturesBig"></div>

in result I do not see any picture on the page but I got the same result in FireBug:

<div id="picsSmall" style="display: block;">
<img src="�����JFIF��`�`���� ...... �d��:1�g�" alt="some text">
</div>

I have two questions:

1. I would like to display image correctly. Could you tell me what is wrong here? I am not good in mvc.
2. I have two the same images the first one is small and the second is big. I would like to show the big image when user click the small. What is the best way to implement it?

If I understand right when picture is loaded to the client side I have to save it in ViewBag. If it’s correct, what is the best way to synchronize small and big pictures (should I use array or object on the client side)? Are there any other ways?
Sorry, it looks more complex than I expected.

Answer 1

You are returning image bytes from your action. You can’t set raw bytes as source, but can use Data URI scheme as source. You’ll need to change format you’ve returned from your action to be properly formatted string with base64 encoded bytes of the image. Note that some browsers have restrictions on size of the data.

Sample from Wikipedia page:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">