ionic-image-loader icon indicating copy to clipboard operation
ionic-image-loader copied to clipboard

Images without extensions do not load when used with cordova-plugin-ionic-webview 2.x

Open lincolnthree opened this issue 6 years ago • 1 comments

I've documented the issue in the related issue tracker: https://github.com/ionic-team/cordova-plugin-ionic-webview/issues/183

But copying the contents here as well: Version of ionic webview plugin: 2.1.4 Version of ionic-image-loader: (i've tried 4.2.1 and 6.3.2)

When loading images that do not have a file extension, they are served as text/html which breaks the browser (img tags, etc.) This causes images to be displayed as "missing" or blank, and the placeholder broken image link icon appears where the image should be.

This used to work fine when images were served from file://, but no longer with the 2.0 update using the http://localhost:8080/file, approach. I'm not sure if this is a problem with the browser or the built-in server.

Example URL that worked with 1.2.1/x: file:///data/user/0/com.maritlabs.topdecked.mtg/cache/image-loader-cache/551799067

But in 2.0 this breaks...

For example, an URL such as: http://localhost:8080/data/user/0/com.maritlabs.topdecked.mtg/cache/image-loader-cache/551799067 (file is correctly named/addressed)

Displays a broken link with this plugin installed, it displays fine

However the following URL displays fine when the image extension is added to the url (assuming the actual file on disk is renamed as well): http://localhost:8080/data/user/0/com.maritlabs.topdecked.mtg/cache/image-loader-cache/551799067.png (file extension has been added to both file and address)

This seems like a problem with file-type detection on the server/browser, but I'm not actually sure how this is supposed to behave.

Note, I've gotten this to work by hacking the image-loader plugin to persist file extensions when generating hashed URL filenames for the image cache:

https://github.com/TopDecked/ionic-image-loader/commit/a6a3c009559ad903b3e470e537a32763d62f531d#diff-4ef7f9a21018998d594a4b98b5703c75

Note: I only had to change a few things to get this to work on the new versions of the webview plugin. I reverted to version 4.2.1 of the plugin because I was having some CORS issues with 6.3.2 and the new HttpClient, but if you aren't using Amazon CloudFront for image hosting, it will probably work for you there as well.

lincolnthree avatar Oct 02 '18 18:10 lincolnthree

Can you enhance V6.3.2 to get file extension from Response Header, content-type besides the method of getExtensionFromUrl(url: string) in case the URL doesn't contain file extension name such as Google Street View image URL

xinfengmich avatar Jan 09 '19 18:01 xinfengmich