Ionic image tag to have dynamic images 'onError' event

Ionic Framework ionic-v3
1

Hi,

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.

Thanks.

2

Have you tried something like:

<img src="{{imagepath || 'assets/imgs/error.png'}}">

where imagepath the dynamic location of the image you want to load and ‘assets/imgs/error.png’ is the fallback.

It may be helpful if you provide some code that you’re expecting to work.

2 Likes
3

Hi @ZeroTerminated,

Thanks for the reply. I needs to load dynamic image for the fallback.
My code is as follows:

       <ion-slide *ngFor="let img of edition">
	<img [src]= img.imgsrc loop="true" onError="src = img.imgsrc_offline">
   </ion-slide>

Thanks.

4

Hi @ZeroTerminated,

I tried but getting ‘unsafe:’ for my image path. Do I need to do anything further to avoid this.

Thanks.

5

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.

6

I think this depends on where your image path is - where are the files, are you referencing them correctly?

You can try look up DomSanitizer

import { DomSanitizer } from '@angular/platform-browser';

Sample code/errors will help. Do you know what values are causing the error.

7

Hi,
I found a solution from *ngIf fallback / default img src in Ionic.

Thanks.