打开Fancybox时，Fancybox Base64String图片消失了

Question

当我使用图片的路径时，Fancybox可以完美的工作，就像下面的例子一样（"完美工作 "的意思是当我点击图片激活Fancybox时，原图片不会消失）。

<div class="container">
    <section id="picture-container">
        <div class="picture-box">
            <a href="http://fancyapps.com/fancybox/demo/2_b.jpg" class="fancybox" rel="group"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt="" /></a>
        </div>            
    </section>
</div> 

但是在我的例子中，我的图片是以字节[]的形式存储在数据库中的，所以我的代码是:

<div class="container">
    <section id="picture-container">             
        <div class="picture-box">
            <a href="#myBase64String" class="fancybox" rel="group">
                <img src="data:image/jpg;base64,@Convert.ToBase64String(Model.Image)" alt="" id="myBase64String" />
            </a>
        </div>
    </section>
</div>

在这种情况下，我的原始图片在点击时消失了。我认为这是由于我的代码中的href指向了img Id，但如果没有它，Fancybox就无法在屏幕上正常显示Base64String图像。

在这两种情况下，jquery代码都是如此。

 $('.fancybox').fancybox({});

我没有找到合适的解决方案；我想我需要帮助:) 谢谢你的帮助

PS：按照建议，我添加了一个显示问题的测试页面的链接。https:/skcollector.azurewebsites.netWorksDetails101?pageNumber=1。上面的图片工作正常，下面的图片有问题。

Answer 1

你已经猜到了，问题是你显示的内容和缩略图一样。你使用的是fancybox v1，已经很久没有支持了，我不知道该版本是否有好的解决办法。你可以复制base64值并将其作为目标源，但这显然不是很有效。

然而，如果你使用的是fancybox v3，解决方案就会是这样。

$('[data-fancybox="images"]').fancybox({
  beforeLoad : function(instance, current) {
    if (current.src=== '#') {
    current.src = current.opts.$orig.find('img').attr('src');
    }
  }
});

你还需要添加 data-fancybox="images" data-type="image" data-src="#" 属性到您的链接。

DEMO - https:/jsfiddle.netvng9ye06