HTML markup

<a class="fancybox" rel="fncbx" href="data:image/jpeg;base64,@Convert.ToBase64String(item.Image)" target="_blank"> <img src="data:image;base64,@Convert.ToBase64String(item.Image)" class="img-thumbnail" alt="Cinque Terre" width="374" height="278"> </a>

Javascript

 <script src="~/Scripts/jquery-2.2.4.min.js"></script> <script src="~/Scripts/jquery.fancybox.pack.js"></script> <script type="text/javascript"> $(document).ready(function () { $("a.fancybox").fancybox({ openEffect: 'elastic', closeEffect: 'elastic', zoomSpeedIn: 300, zoomSpeedOut: 300, overlayShow: false }); }); </script>

Result in Opera, Opera Neon, Chrome: Image when clicking on a.fancybox in Opera Neon

Result in Edge, IE: Image when clicking on a.fancybox in Edge

How to solve this mapping problem in Edge i IE?

    1 answer 1

    When searching the Internet and testing various attempts to correct the display of images, it became clear that the Data URI link <a href="data:... is not supported in Edge i <a href="data:... But there is support for Data Uri of the <img> tag.

    Therefore, the solution is to take the href attribute from <img src="..."> via Javascript .

    Markup change

      <a class="fancybox" rel="fncbx" href="#" target="_blank"> <img src="data:image;base64,@Convert.ToBase64String(item.Image)" class="img-thumbnail" alt="Cinque Terre" width="374" height="278"> </a>

    Changing the script to initialize FancyBox

      <script type="text/javascript"> $(document).ready(function () { $("a.fancybox").each(function (i, elem) { var href = $(this).find('img').attr('src'); if (href !== undefined) { $(this).fancybox({ href: href, type: 'image', openEffect: 'elastic', closeEffect: 'elastic', zoomSpeedIn: 300, zoomSpeedOut: 300, overlayShow: false, }); } }); }); </script>

    As a result, the image is now displayed as intended. Result: Edge image display running

    True in Edge and IE there are display delays - but the main thing that works