Resource interpreted as Document but transferred with MIME type image/jpeg

Question

I'm using Filepicker.io to handle my image uploads on my website.

I'm also using FancyBox to display a nice slider. Everything works fine if I use a regular image like: http://i.imgur.com/asdf.jpeg as the <img src="">. Meaning I click the images and the slider pops up correctly.

However when I switch out those static image url's and use my Filepicker addresses, when I click on the images to open the fancybox, the image is downloaded.

Here's the message I get in the console, on Google Chrome:

Resource interpreted as Document but transferred with MIME type image/jpeg: "https://www.filepicker.io/api/file/yknn4hWSOOm2NLZYGR3O?dl=false".

Any suggestions?

Answer 1

Since your link:

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

doesn't have an image extension (jpg, png, gif), fancybox doesn't know what type of content needs to be handled. You need to tell it by adding the API option "type": "image" like:

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

That is documented here http://fancybox.net/faq, No. 6 (if using v1.3.4), or here http://fancyapps.com/fancybox/#support, FAQ tab, No. 5 (if using v2.x).

For more options how to handle the issue see here: https://stackoverflow.com/a/17554660/1055987

Answer 2

Another option is to append the name of the file onto the url, for example: https://www.filepicker.io/api/file/yknn4hWSOOm2NLZYGR3O+photo.png?dl=false

Filepicker.io ignores anything on the file link after the + sign to allow you to make the urls more "adapter friendly"