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

当我使用图片的路径时,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。上面的图片工作正常,下面的图片有问题。

解决方案:

你已经猜到了,问题是你显示的内容和缩略图一样。你使用的是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

给TA打赏
共{{data.count}}人
人已打赏
解决方案

用于选择中间字用空格隔开的Regex

2022-5-11 2:00:29

解决方案

为什么我的Promise处于待定状态?HTTP请求库被更改

2022-5-11 2:00:31

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索