资源解释为文档，但使用 MIME 类型 image/jpeg 传输答案

【问题标题】：Resource interpreted as Document but transferred with MIME type image/jpeg资源解释为文档，但使用 MIME 类型 image/jpeg 传输
【发布时间】：2012-12-08 17:32:03
【问题描述】：

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

我还使用 FancyBox 来显示一个漂亮的滑块。如果我使用像http://i.imgur.com/asdf.jpeg 作为<img src=""> 这样的常规图像，一切正常。意思是我点击图片，滑块会正确弹出。

但是，当我切换出那些静态图片 url 并使用我的 Filepicker 地址时，当我点击图片打开 fancybox 时，图片就会被下载。

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

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

有什么建议吗？

【问题讨论】：

您的服务器发送的 http 标头似乎不正确，请发布。

标签： google-chrome fancybox mime-types filepicker.io

【解决方案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

【讨论】：

谢谢，我会测试一下并分享结果。

【解决方案2】：

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

Filepicker.io 会忽略 + 号后文件链接上的任何内容，以使您的 url 更“适合适配器”

【讨论】：