Handle bad 'file type' from remote host

feimosi / baguetteBox.js

:zap: Simple and easy to use lightbox script written in pure JavaScript

https://feimosi.github.io/baguetteBox.js/

MIT License

2.44k stars 429 forks source link

Handle bad 'file type' from remote host #203

Open gtnewton opened 5 years ago

gtnewton commented 5 years ago

I'm using baguetteBox to present images from another host (Library and Archives Canada) that does not handle file types very well. As a result I get a warning in Chrome: 'Resource interpreted as Document but transferred with MIME type image/jpeg" - for e.g. try this image https://central.bac-lac.gc.ca/.item/?op=img&app=CEF&id=555724a

I resolved it heavy-handedly by changing the baguetteBox regex to var regex = /.+\.(gif|jpe?g|png|webp||)/i;

I'm sure my solution is sub-optimal. Hoping there's a more elegant way of handling such server responses.

feimosi commented 5 years ago

Your issue is twofold:

the server sends the image as if it was a document. You can check that by going directly to the link: https://central.bac-lac.gc.ca/.item/?op=img&app=CEF&id=555724a Just make sure you preserve log between reloads. It'll show the exact same warning. Nothing to do with baguetteBox.
```
Resource interpreted as Document but transferred with MIME type image/jpeg:
"https://central.bac-lac.gc.ca/.item/?op=img&app=CEF&id=555724a".
```
the image URL lacks an extension. That's why regex property exists so that anyone can adjust it to their needs. The default value works for 90% of the users.

sayontan commented 3 years ago

I would like to add to this issue.

This is my use case: I have a gallery/lightbox plugin written for WordPress, which pulls data from multiple sources and displays them on a user's WP website. The expectation is that when the user clicks on a photo, it opens up in a lightbox.

Now, my plugin supports Flickr, SmugMug, Google Photos, Instagram, Zenfolio and native WordPress galleries. BaguetteBox seems to work for all of these, except for Google Photos. This is because Google Photos returns URLs that don't have the JPG extension in them. Typically the other lightbox scripts that I use have the ability to specify the file type explicitly (but those lightboxes also support videos and regular HTML markup).

Is there any such provision to force BaguetteBox to assume that an image is being served?