# Ionic image tag to have dynamic images 'onError' event

**URL:** <https://forum.ionicframework.com/t/ionic-image-tag-to-have-dynamic-images-onerror-event/121441>\
**Category:** ionic-v3\
**Created:** [February 14, 2018, 7:49am UTC](https://forum.ionicframework.com/t/ionic-image-tag-to-have-dynamic-images-onerror-event/121441 "2018-02-14T07:49:01Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![akhiilsanker](https://avatars.discourse-cdn.com/v4/letter/a/50afbb/32.png) [@akhiilsanker](https://forum.ionicframework.com/u/akhiilsanker)\
**Post date:** [February 14, 2018, 7:49am UTC](https://forum.ionicframework.com/t/ionic-image-tag-to-have-dynamic-images-onerror-event/121441/1 "2018-02-14T07:49:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ZeroTerminated](https://avatars.discourse-cdn.com/v4/letter/z/e480ec/32.png) [@ZeroTerminated](https://forum.ionicframework.com/u/ZeroTerminated)\
**Post date:** [February 14, 2018, 8:38am UTC](https://forum.ionicframework.com/t/ionic-image-tag-to-have-dynamic-images-onerror-event/121441/2 "2018-02-14T08:38:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![akhiilsanker](https://avatars.discourse-cdn.com/v4/letter/a/50afbb/32.png) [@akhiilsanker](https://forum.ionicframework.com/u/akhiilsanker)\
**Post date:** [February 14, 2018, 8:47am UTC](https://forum.ionicframework.com/t/ionic-image-tag-to-have-dynamic-images-onerror-event/121441/3 "2018-02-14T08:47:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![akhiilsanker](https://avatars.discourse-cdn.com/v4/letter/a/50afbb/32.png) [@akhiilsanker](https://forum.ionicframework.com/u/akhiilsanker)\
**Post date:** [February 14, 2018, 8:59am UTC](https://forum.ionicframework.com/t/ionic-image-tag-to-have-dynamic-images-onerror-event/121441/4 "2018-02-14T08:59:17Z")

</div>

Hi @ZeroTerminated,

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

Thanks.

---

<div class="post-metadata">

**Author:** ![Nexi](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nexi/32/117290_2.png) [@Nexi](https://forum.ionicframework.com/u/Nexi)\
**Post date:** [February 14, 2018, 9:00am UTC](https://forum.ionicframework.com/t/ionic-image-tag-to-have-dynamic-images-onerror-event/121441/5 "2018-02-14T09:00:52Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ZeroTerminated](https://avatars.discourse-cdn.com/v4/letter/z/e480ec/32.png) [@ZeroTerminated](https://forum.ionicframework.com/u/ZeroTerminated)\
**Post date:** [February 14, 2018, 9:13am UTC](https://forum.ionicframework.com/t/ionic-image-tag-to-have-dynamic-images-onerror-event/121441/6 "2018-02-14T09:13:17Z")

</div>

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

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

```

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

---

<div class="post-metadata">

**Author:** ![akhiilsanker](https://avatars.discourse-cdn.com/v4/letter/a/50afbb/32.png) [@akhiilsanker](https://forum.ionicframework.com/u/akhiilsanker)\
**Post date:** [February 14, 2018, 11:34am UTC](https://forum.ionicframework.com/t/ionic-image-tag-to-have-dynamic-images-onerror-event/121441/7 "2018-02-14T11:34:50Z")

</div>

Hi,  
I found a solution from [\*ngIf fallback / default img src in Ionic](https://forum.ionicframework.com/t/ngif-fallback-default-img-src-in-ionic/94900/5?u=akhiilsanker).

Thanks.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:50pm UTC](https://forum.ionicframework.com/t/ionic-image-tag-to-have-dynamic-images-onerror-event/121441/8 "2021-07-19T21:50:34Z")

</div>