Colorbox将图像显示为二进制数据

Question

我正在尝试将Colorbox用于使用Backbone.js的网站构建。我有一个简单的图像标签，如下所示：

<a class="gallery" href="/document/123"><img class="attachment-preview" src="/document/123" /></a>

网址/ document / 123显示（简单png）图像。123是映像的ID，服务器从数据库获取base64编码的映像，对其进行解码并显示。当我在浏览器中放入example.com/document/123时，它可以正确显示图像，并且该图像也可以使用上面粘贴的标签正确显示。

但是，当我单击图像时，颜色框将打开，并且仅显示我认为是二进制数据的内容：

?wQH*??:?R??hc?:+{?????d??j???}7u($??@?????[?6Ym}???^(_?i?~?H?>?? etc..

所以我的问题是：这怎么可能？更重要的是：我该如何解决？欢迎所有提示！

Answer 1

Colorbox将通过url的扩展名自动检测href目标的内容类型。例如，如果url目标是扩展名为.jpg，.png或.gif的文件，则颜色框会将内容显示为图像。网址“ / document / 123”即使返回图片也将被视为html内容。

您可以在初始化colorbox插件时添加photo：true属性来解决此问题。

$("a").colorbox({photo:true});

屏幕截图：