Question

I need some help or information with showing the image int the <img> tag when the src attribute is the binary array (ASP.NET MVC 3):

https://stackoverflow.com/a/2644598/106616

this I the solution I use. (the purpose is, i don’t want to show users the physical image path)

Ok, then I want to use the FancyBox plugin to show that image:

<link href="@Url.Content("~/Content/jquery.fancybox-1.3.4.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.fancybox-1.3.4.js")" type="text/javascript"></script>

 <a id="book-cover-hl" href="@path">
    <img alt='' class='book-cover-details' src="@path" />
  </a>

  $(function () {
         $("a#book-cover-hl").fancybox({
             'overlayShow': false,
             'transitionIn': 'elastic',
             'transitionOut': 'elastic'
         });
   });

But, I’ve noticed if I put the @path variable in the <a [...]
href="@path"> the plugin doesn’t work properly – if I click on the
image, only the loading animation shows, but not my image. Does anyone
know how to fix it? Or maybe there is another idea ? Let me hear it
from You about that.

Answer 1

According to that answer, it works:

If you want to use fancybox with data uri images like.

<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//
gA8Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NzApLCBxdWFsaXR5ID0gMTAwCv/
bAEMAAQEBAQEBAQEBAQEB......

you need to change somethings in jquery fancybox script.

1) Base on Version: 1.3.4 (11/11/2010) 2) Change line 23 for this one.

ajaxLoader = null, imgPreloader = new Image(), imgRegExpdatauri=/
(data:image)/i ,imgRegExp = /.(jpg|gif|png|bmp|jpeg)(.)?$/i,
swfRegExp = /[^.].(swf)\s$/i,

3) change lines 113-117 for this ones

if (href.match(imgRegExpdatauri)) { type = ‘image2’;

} else if (href.match(imgRegExp)) { type = ‘image’;

4) Insert this lines after break; on line 197

case ‘image2’: busy = false;

$.fancybox.showActivity();

imgPreloader = new Image();

imgPreloader.onerror = function() {
_error(); };

imgPreloader.onload = function() { busy = true;

imgPreloader.onerror = imgPreloader.onload = null;

_process_image(); };

imgPreloader.src = href; break;

Now it should work.