资源解释为Document但使用MIME类型image / jpeg进行传输

Question

我正在使用Filepicker.io来处理我网站上的图片上传。

我也在使用FancyBox来显示一个漂亮的滑块。如果我使用http://i.imgur.com/asdf.jpeg之类的常规图片作为<img src="">，那么一切正常。意思是我单击图像并正确弹出滑块。

然而，当我关掉那些静态图片网址并使用我的Filepicker地址时，当我点击图片打开fancybox时，会下载图片。

以下是我在Google Chrome上的控制台中收到的消息：

  

资源解释为文档但使用MIME类型image / jpeg传输：“https://www.filepicker.io/api/file/yknn4hWSOOm2NLZYGR3O?dl=false”。

有什么建议吗？

Answer 1

由于你的链接：

https://www.filepicker.io/api/file/yknn4hWSOOm2NLZYGR3O?dl=false

没有image扩展名（jpg，png，gif），fancybox不知道需要处理哪些type内容。您需要通过添加API选项"type": "image"来告诉它，如：

$(".fancybox").fancybox({
   "type": "image"
});

这里记录了http://fancybox.net/faq，第6号（如果使用v1.3.4）或此处http://fancyapps.com/fancybox/#support，FAQ标签，第5号（如果使用v2.x）。

有关如何处理此问题的更多选项，请参阅此处： https://stackoverflow.com/a/17554660/1055987

Answer 2

另一种选择是将文件的名称附加到网址上，例如： https://www.filepicker.io/api/file/yknn4hWSOOm2NLZYGR3O+photo.png?dl=false

Filepicker.io在+符号后忽略文件链接上的任何内容，以允许您使网址更加“适配器友好”