Cache Image for Offline Use


#1

I have added an attribute directive for Ionic 2 applications to cache images for offline use.
Tested on Android and verified working great.

Yay…~!


#2

You are great!

I will test in iOS!

Thank you!!


#4

Can you explain how to use this?


#5

I have a different approach, I am using a sqlite database in order to save the images in base64string.

Please, check my tutorial:
https://playcode.org/how-to-cache-images-in-ionic-2-rc0/


#6

This should probably be done with Service workers


#7

Totally agreed. This should be done using service worker~!


#8

Yeah, probably you both are right, but how to do it for offline use?

I’ve tried some solutions and its not working that way and I don’t know why it’s slower than my solution…



#9

OK- service workers seem the way to go. I see 2 final include sw-toolbox.
So could anyone help me out with an example?
I am downloading Firebase Storage images and I’d like to cache them? How can I do this?

And what about iOS?

I’d be really grateful for any help

Shane


#10

Hi guys,

Please do share if there is any examples/tutorials to explain how to use service workers to cache image/data for offline use. Really appreciate it!


#11

ionic-image-loader.


How can I cache the image in ionic3
#12

I’m using this too, now and it’s very smooth, easy to implement and does it’s job

Thanks

Shane


#13

In this library in step three it has defined that “Then add IonicImageLoader in your child/shared module(s)


import { IonicImageLoader } from 'ionic-image-loader';

@NgModule({
  ...
  imports: [
    IonicImageLoader
  ]
})
export class SharedModule {}

What are child/shared modules.

In my project I have only one module which is in app.module.ts file.


#14

Then you should be good to go. I expect what it means by “child/shared modules” refers to lazy loading.


#15

It is giving me error

"has no exported member ‘Renderer2’."
node_modules/ionic-image-loader/dist/components/img-loader.d.ts
import { ElementRef, Renderer2, OnInit, EventEmitter } from ‘@angular/core’;

How can I solve that ?

I am using angular 2 not angular 4


#16

I think you answered your own question. That shouldn’t be a very difficult upgrade, though.


#17

Does it will affect my angular 2 project Or are there any syntax changes in angular 4 which can affect my code ?


#18

Minimal. You can check out the whole changelog history here.


#20

Why this library requires “serve” command before every build command ?


#21

Hi guys.
I followed every instruction (https://github.com/zyra/ionic-image-loader) but I just can’t make it work. My images just won’t show up after I changed all my tags from <img/> to <img-loader></img-loader>. I see the spinners for a while but then they go away and no image is shown.

My images are URL strings stored in a database and retrieved by calling the class property in the view.
For example:
<img src="{{ class.imageurl }}" />.

Any hint? Thanks!


#22

If you’re using the DOMSanitizer on those URLs, the way you write it will subtly fail, because interpolation only creates strings. Instead of <img src="{{foo}}">, always prefer <img [src]="foo">.


Ionic gifs