Image Loading Error

[jayordway]

I have not been able to use this plugin for any version since 4.2.1.

I receive this error in iOS:

ImageLoader Error Http failure response for (unknown url): 0 Unknown Error

Note I have tried various versions of this past 4.2.1 with various versions of ionic webview, 1.19.1, 1.20.0 2.0.0, everything but 4.2.1 fails on iOS, yet to test Android.

Sometimes some images load but than many others result in the aforementioned error.

[gmaye]

@ihadeed Like I said on https://github.com/zyra/ionic-image-loader/issues/131#issuecomment-408566213 I went ahead and updated ionic-image-loader processQueue method in my local so that it uses the plugin cordova-plugin-advanced-http instead of angular's HttpClient and everything worked ok. Images now load fine every single time (and noticeably faster too) and no CORS issues.

The only drawback I see is that the plugin does not support Browser, only iOS and Android for now.

For those interested, all I did was the usual: declare var cordova;

And then changed the this.http.get(... part with: cordova.plugin.http.downloadFile(currentItem.imageUrl, {}, this.config.httpHeaders, localDir + fileName, (file: FileEntry) => { if (this.isCacheSpaceExceeded) { this.maintainCacheSize(); } this.addFileToIndex(file).then(() => { this.getCachedImagePath(currentItem.imageUrl).then((localUrl) => { currentItem.resolve(localUrl); resolve(); done(); this.maintainCacheSize(); }); }); }, (e) => { //Could not get image via httpClient error(e); } );

I tried using @ionic-native/http wrapper but the downloadFile method's return type is wrong so typescript gets mad. It returns as Promise<HTTPResponse> when it should be Promise<FileEntry> instead.

I don't know if it's desirable to create a dependency on another plugin but it worked for me and it's fully functional.

[jayordway]

@wis3ape Will this be merged as a PR? It works with my Android but no iOS.

[gmaye]

@jayordway I didn't create a PR with my proposed change but I could definitely do so. My only concern like I said before is adding a new dependency on another cordova plugin. I've been testing this change all day and so far so good.

[jayordway]

@wis3ape Does it work on iOS? It doesn’t for me given that I need the WKWebView

[gmaye]

@jayordway I’m using WKWebView in my app and the change worked ok on iOS. How did you test it or what did you change?

[Ross-Rawlins]

I am getting this issue on ios and android so any fix/work around world be great as I would like to use the upgraded version. For me it seems like its always a CORS issue, always telling me the origin or local host is not allowed. Is this the same as you guys or should I create a new bug?

[gmaye]

@Ross-Rawlins yes, in fact the error mentioned by @jayordway "Http failure response for (unknown url): 0 Unknown Error" is due to CORS. At least that's what I was getting as response from S3.

After reading Ionic's doc on WKWebView, the very last paragraph talks about how to circumvent CORS in case you're not in control of the backend to set it properly. This can be accomplished by turning angular http requests into native-like requests using the plugin explained here https://ionicframework.com/docs/native/http/

The issue I found with that Ionic Native wrapper is that the return type for the function I needed to use is wrong so typescript fails to compile it and there's no way to cast it. The function downloadFile from the plugin returns a FileEntry object whereas the Ionic wrapper function returns a Promise<HTTPResponse> instead of Promise<FileEntry>. I've already filed an issue on their side.

So long story short, I forked this project, made the changes I pointed out in my first comment using the correct plugin (not the ionic native wrapper), built it, moved it to my project, then rebuilt the app and every image started loading as expected.

[jayordway]

@wis3ape I applied the updates that you had mentioned, to use a different "advanced-http" plugin from inside the ionic-image-loader code. I am still seeing that error on iOS, but not Android. I have tried a few different versions of the image loader with different versions of the ionic wkwebview plugin, sometimes the pictures come in, but most of the time they go to my fallback image.

[macklus]

I can confirm bug on Android with plugin's version 5.0.5.

Also, i dont really know why i got 5.0.5 version, when latest version on https://github.com/zyra/ionic-image-loader/releases seems to be 5.0.4 ¿...?

[Ross-Rawlins]

What is a stable version of version 5 to use?

[macklus]

after run npm install --save ionic-image-loader, my package.json was:

"ionic-image-loader": "^5.0.5"

[Hanzofm]

@wis3ape where do you modified the code on local?

I have already modified on /node_module/ionic-image-loader/src/provider but the cors problem persits on android. Do you modified the local files or fork the library

[huaigit]

const file = await this.navhttp.downloadFile(currentItem.imageUrl,{},this.config.httpHeaders,localDir+fileName) as FileEntry;