Dynamic images

Ionic Framework ionic-v3
1

Hi Guys ,

I am trying to load dynamic images based on images type.

im trying this in HTML.
<ion-img [src]="todo('test.jpg')" ></ion-img>
and my tS code is

todo(fr:string)
  {
console.log("Mypage");
    return   this.globalService.getfileimage(fr);
  }

my globalService code is

getfileimage(type:string)
  {
     console.log(type);
    return 'assets/icon/7z.jpg';
  }

now i am seen my consolelog in browser

Mypage printing 150 time and same console.log(type); also printing 104.

Please suggest me to fix this.

2

The problem is that your code in ion-img calls the function todo(). Because it is a function, Angular cannot tell if the value changes and thus does not know when it needs to redraw your page.

We found similar behavior when we created our app. The fix, if possible, is to use a variable in your .ts file and put the result of this.globalService.getfileimage(fr) into that variable. Then, reference that variable in your html code. In other words, you need to find a way to not call the function from the html code – that is what is causing your behavior, probably.