Ionic Image Loading and Caching [v3]

ionic-image-loading-cache

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

Join now & Unlock


Comments on Ionic Image Loading and Caching [v3]

  1. Newton Munene says:

    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 ?

    1. Thanks Newton, you are welcome 🙂

      1. Newton Munene says:

        I have a question that is not exactly related to this. What is the difference between HttpModule and HttpClientModule?

  2. Eddy Faustor says:

    Hi, could you explain me how I can implement a searchbar with this plugin?

  3. Fedele Rosiello says:

    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?

    1. Josh says:

      20mb is probably way too big. Have you tried smaller images?

      1. rahadiana nugraha says:

        You can use a proxy image from a third party to reduce image file size like

        google cache image: http://bit.ly/GimageCache

  4. Ednildo Macena says:

    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?

    1. Justine Lance T. Mojal says:

      i think we are no longer able to access files via the “file://” path 🙂

  5. rajesh says:

    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…

  6. Björn Pfoster says:

    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

  7. cheepurupalli sravani says:

    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

    1. Javier Ortegon says:

      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

  8. lickybuay says:

    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

Leave a Reply

Your email address will not be published. Required fields are marked *