I am build an ionic app which is both online and offline. Api has many server url images and I need to load those while in offline mode.
For that I downloaded the images and set the downloaded file path in ‘onError’ event of image. But it is not working with dynamic images.
Do anyone have a better suggestion to do a offline app with many url images.
A good solution is to write a directive for that. It grabs the image element and puts a placeholder image to its src property. Then it checks on the device for the image file. If it exists, it changes the src property to that file path. If it does not exist, it tries to download the file and after success changes the src property to the new file path. If the download fails, it keeps the placeholder as src property.
The API could look something like that: <img [dynamicImage]="img.filePath" [downloadUrl]="img.remotePath" [fallback]="img.placeholder" />
I downloaded the files with file-transfer plugin and assigned them to the src property by using URL.createObjectURL() on the blob file.