Fancybox Base64String 图像在 fancybox 打开时消失

Question

Fancybox 在我使用图像路径时完美运行，如下例所示（对于 "works perfectly" 我的意思是当我单击它以激活 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>

但在我的例子中，我将我的图像作为 byte[] 存储在数据库中，所以我的代码是：

<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>

在这种情况下，我的原始图像在单击时消失了。 Fancybox 在前台正确显示它，但原来的那个已经不在了。我认为这是由于 href 指向我代码中的 img Id，但如果没有它，Fancybox 无法在屏幕上正确显示 Base64String 图像。

在这两种情况下，jquery 代码是：

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

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

PS：按照建议，我在显示问题的测试页中添加了 link：https://skcollector.azurewebsites.net/Works/Details/101?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="#" 属性添加到您的 link。

演示版 - https://jsfiddle.net/vng9ye06/

Fancybox Base64String 图像在 fancybox 打开时消失

Fancybox Base64String image disappears when fancybox opens

jquery

fancybox