If your app works with some kind of API and needs to display remote images you will most likely end up thinking about caching either your requests or at least the images to improve the performance of your Ionic app.
We’ve previously talked about request caching in this Quick Win, but today we will give another plugin called Ionic Image Loader a try.
The idea behind this plugin is to improve our performance by loading the images inside a background thread using the native file implementation and also caching the images therefore. Let’s see how it works!
The full quick win with snippets is only available to Ionic Academy members.
Join now for
- Unlimited access to all quick wins
- Library of 40+ step-by-step video courses
- Support for Ionic questions via Slack & private community
Current member? LOGIN
I’ve been looking for ways to implement this. If I had know about this plugin earlier I wouldn’t have gone through the struggle. Awesome tutorial ?
Thanks Newton, you are welcome 🙂
I have a question that is not exactly related to this. What is the difference between HttpModule and HttpClientModule?
Hi, could you explain me how I can implement a searchbar with this plugin?
Hi, it seems not working with big images on android. I tested it with a 20MB PNG image. I tried to use imageLoader.preloadImage({IMAGE_PATH}) on app startup and the img-loader tag into my component template but imageLoader.preloadImage never ends in a result (success or error). Any suggestions?
20mb is probably way too big. Have you tried smaller images?
You can use a proxy image from a third party to reduce image file size like
google cache image: http://bit.ly/GimageCache
I keep get an error: “Not allowed to load local resource: file:///data/user/0/com.koine.heroburguer/cache/image-loader-cache/1830664291”
Someone have an ideia to solve this?
i think we are no longer able to access files via the “file://” path 🙂
hi , thanks for this tutorial,
Pleas advice, i am not able to find the file inside cache directory….
and pls advice i am not able to set spinner…
Thanks in advance…
I keep getting an error
Failed to load resource: unsupported URL
cdvfile://localhost/persistent/imgcache/125126cac334f9334a4f4baf2d3ba73236508f24.png
I am running this in an iOS Emulator (iPhone X).
Also under Android (OnePlus 6) this error comes up:
Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME
also cdvfile://…
I changed my webview to CDVWKWebViewEngine (Like recommended everywhere), also removed the platform ios and android many times.
HOW CAN I MAKE THIS RUN, i am soooo desperate…
Appreciate any help
Hi, I have followed the similiar steps but it was working on the browser but in android device its not loading. Its showing just a White screen.. Could please help me out with this.. Thanks in advance
I have the same problem but if you run de app in the device and it don’t have internet connection the image charge fine
Nice tutorial, had an issue. When i test in my pc works well, but in my phone only show this placeholder :S, ¿how can i fix this? https://uploads.disquscdn.com/images/81e8ae6b13329dca9a6482361737b5ed40a3eda545557ecc96b47243f978312e.png