ionic-image-loader
ionic-image-loader copied to clipboard
zyra
Update to HttpClient breaks images with CORS restrictions on iOS with WKWebView
See #125.
This merge appears to break image loading on iOS with WKWebView. It happens because there is no way to disable CORS when you are using WKWebView.
In my case, the images I would like to cache for offline use are user avatars, which means that I do not control the remote server and cannot work around the issue that way.
Downgrading to 4.2.1 fixes the issue for now.
Thanks for reporting this bug.
Are you having the CORS issues when trying to download the images from the remote server? or when trying to load them from the filesystem?
They occur when loading from the remote server, and the spinner is displayed forever.
I confirm! v5.0.0 using WKWebView result in CORS issues for picture loaded remotely. Downgrading to 4.2.1 is fixing the problem.
See https://ionicframework.com/docs/wkwebview/#xhr-requests-do-not-work
Looks like we have to revert the HttpClient change, or seek an alternative. I'm leaning more towards my WIP native http plugin, but I'm not sure when I'll have time to finish developing it.
I have the same issue displaying an image from a remote server on an iOS device. Do we know when this fix will be implemented. I tried downgrading to v4.2.1 but was still getting the issue. What's the correct procedure for downgrading?
@Boldonglen change the version of the package in your package.json, then run npm install.
If it's still doesn't work then you should look into the configuration of the server serving your pictures.
Hi @glemiere, Thanks for the advice ill try that. I have full control of the server and I use NGINX to host my PHP (Laravel) backend that serves up the images. Could you give me any advice on how the it should be configured?
@Boldonglen you can enable CORS in PHP using the following header :
header("Access-Control-Allow-Origin: *");
You can directly apply this header to your nginx configuration, see : https://gist.github.com/Stanback/7145487
same here.
My pictures are on amazon S3, i tried to change the CORS config but wasn't successful. Had to downgrade to 4.2.1.
@matheusdavidson you have no CORS issues on your server as long as downgrading to 4.2.1 works. If it doesn't, only then you might have a real CORS issue ;)
Also had to downgrade to 4.2.1 to get this to work with S3 (CORS config is correct). However, periodically, images not loading - probably because of other issues with WKWebView compatibility(?).
This is a dealbreaker for me - I would rather let users sit and wait for images to reload rather than not show anything! Hasten to say, I've dropped this plugin :-(
Totally agree with @ihadeed on reverting/finding an alternative to HttpClient.
@jaybloke same for me with S3 images loading. Downgraded to 4.2.1 and it works.
@ihadeed @glemiere @danielsogl downgrading to v4.2.1 images load without CORS issues but if you navigate to another view while images are still loading, then when you return they appear half gray/black until cache is cleared (I recall there's an open issue about it).
In my case the CORS issue on v5 only happens when the app runs without the --live-reload (or -c) flag, otherwise with live reloading I didn't see any issues at all and I don't have a clue why such difference.
When CORS is an issue and cannot be configured, Ionic recommends using the cordova plugin in https://ionicframework.com/docs/native/http/ which is supposed to bypass CORS completely working as a proxy for HTTP requests using native code. Could that be of any help to fix v5 CORS issue?
Thanks a lot for your work btw!
@Ross-Rawlins maybe you have an actual CORS misconfiguration server side ?
@wis3ape yes images are getting corrupted when you navigate while it's loading, I recommend you to use the preload function of the library. I built a preloader running after user authentication in my app to download users informations and also used it to work around this problem, you should do the same ;-)
I am pulling in images from external sources ike linked in using an RSS feed so I am pretty sure I cant resolve this as I have no access to the server. Older version of this library worked.
On Tue, 31 Jul 2018 at 18:07, Guillaume Le Mière [email protected] wrote:
@wis3ape https://github.com/wis3ape yes the image get corrupted when you navigate while it's loading, I recommend you to use the preload function of the library. I built a preloader running after user authentication in my app to work around this problem, you should do the same ;-)
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/zyra/ionic-image-loader/issues/131#issuecomment-409276602, or mute the thread https://github.com/notifications/unsubscribe-auth/ADMeUCFACgmCs7wG3VG_j0Xw6iGKkFFEks5uMIDGgaJpZM4RwsbZ .
-- Ross Rawlins Tel: 021 531 7087 Cell: 072 424 9480 Skype: ross.rawlins Email: [email protected]
http://www.duovili.co.za https://plus.google.com/113781084234234096576/posts https://www.facebook.com/Duovili http://www.linkedin.com/company/duovili/ https://twitter.com/Duovili
This e-mail message and all attachments contain the CONFIDENTIAL AND PROPRIETARY information of DUOVILI DEVELOPMENTS. and may contain LEGALLY PRIVILEGED information. If you are not the intended recipient, you are hereby notified that any disclosure, distribution, or use of this e-mail, its attachments or any information contained therein is unauthorised and prohibited. If you have received this in error, please contact the sender immediately and delete this e-mail and any attachments.
Cant you explain this a bit more so I can try implement it.
On Wed, 1 Aug 2018 at 21:15, Guillaume Le Mière [email protected] wrote:
@Ross-Rawlins https://github.com/Ross-Rawlins have you tried to set up a proxy ?
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/zyra/ionic-image-loader/issues/131#issuecomment-409688706, or mute the thread https://github.com/notifications/unsubscribe-auth/ADMeUHq_pJBdB-Ke9bGD_nDvy250o3Wdks5uMf5kgaJpZM4RwsbZ .
-- Ross Rawlins Tel: 021 531 7087 Cell: 072 424 9480 Skype: ross.rawlins Email: [email protected]
http://www.duovili.co.za https://plus.google.com/113781084234234096576/posts https://www.facebook.com/Duovili http://www.linkedin.com/company/duovili/ https://twitter.com/Duovili
This e-mail message and all attachments contain the CONFIDENTIAL AND PROPRIETARY information of DUOVILI DEVELOPMENTS. and may contain LEGALLY PRIVILEGED information. If you are not the intended recipient, you are hereby notified that any disclosure, distribution, or use of this e-mail, its attachments or any information contained therein is unauthorised and prohibited. If you have received this in error, please contact the sender immediately and delete this e-mail and any attachments.
@Ross-Rawlins Basically you need to fetch your pictures with a server that serves them back to your app with the right CORS configuration. You can implement this anyway you want, you don't even need another physical machine to do that ;)
A possible solution is that you may need to remove the content src reference in your ./config.xml file:
<content original-src="index.html" src="http://10.0.0.12:8100" />
Then rebuild your project:
ionic cordova build ios
Then upload and test on your physical phone using XCode.
Basically, it seems that for this plugin, it's not possible to use livereload on your physical iOS device and simulate an XCode iOS device at the same time.
