Question

我正在尝试使用fancybox来显示图片。我的图像是mysql数据库中的blob。

这是我正在使用的html / php：

<a class="fancybox-buttons" data-fancybox-group="g1" href="data:image/jpeg;base64,<?php echo base64_encode($pic['screenshot']); ?>"><img src="data:image/jpeg;base64,<?php echo base64_encode($pic['screenshot']); ?>" width="150px" height="250px"/></a>

这样可行，但是当页面加载时以及当我将鼠标移到图像上时，我会遇到这种奇怪的闪烁鬼影问题。

Answer 1

图像显示部分：

<a class="fancybox fancybox.iframe" href="blob:http://localhost:8080/a71e1fb6-8482-49cf-88fa-a29dfc71e39e">
    <img src="blob:http://localhost:8080/a71e1fb6-8482-49cf-88fa-a29dfc71e39e"/>
</a>

通过这种方式设置fancybox的文档类型（页面加载时）：

jQuery(document).ready(function() {
    $(".fancybox").fancybox({type : 'image'});
}

成功来了。

当使用带有pdf或其他文件类型（非图像）的花式框时，我们设置其他适当的值。

Answer 2

我甚至不知道你做了什么是可能的。我认为更好的方法是创建一个脚本来动态地为您的图像提供服务......

所以图像src将是“image.php？id = 123”然后你会得到image.php服务脚本，即...

Serve image with PHP script vs direct loading an image

我对你的应用程序了解不多，但是在数据库中存储图像是一个好主意。看起来它们会让数据库变得非常快。

Answer 3

我没有足够的评论点，所以我要把我的2美分放在这里。希望它有所帮助。

移动设备可能无法完全支持blob存储。 https://developer.mozilla.org/en-US/docs/Web/API/Blob

所以图像src将是＆＃34; image.php？id = 123＆＃34;然后你会有image.php服务脚本，即......

这是一个非常好的主意，除了在我的情况下我们使用带有MVC / ADFS身份验证模型的Web API。 Web API是一种无状态Web服务，因此该选项并不总是在任何地方都可用。为了使其工作，我们必须允许匿名访问该API调用，这可能存在安全风险，具体取决于数据。

使用fancybox显示blob图像的问题

3 个答案: