Loading images from local storage

Hi everyone,

My requirement is:

  • I need to save dynamic html page including images on the local storage for offline use.

I have saved dynamic pages and can load the page successfully, however, the the problem is:

it does not save images that are called inside image tag i.e. because the images only loads after the page is rendered.

To solve the problem my idea was to download those images separately and replace the src with the local storage’s image location or with the image’s base64 data. I have only managed to show
base64 image, it doesn’t show the image if I put the filepath as the source even if I resolve the native filepath for android and ios.

Here is how I’m binding source to the method:

on .html file

<img class="image" [src]="sanitizer.bypassSecurityTrustUrl(getImage('imageId'))"/>

and on .ts file

    getImage(imageId) {

    	return the base64 image from local storage.
    }

Here the problem is src inside img tag continuously calls the method getImage() which absolutely freezes the app.

Why is it doing it? Is the correct way to do or I’m doing it all wrong? I need the app to work offline. I would appreciate if anyone can help me on this.