Update dynamically image source-CodePudding

I have an Ionic Angular app and I'm trying to update img src dynamically.

  let element = <HTMLImageElement>document.getElementById(`myImage${index}`);
  console.log(this.articleCards[index].images[this.articleImageIndex])
  element.src = this.articleCards[index].images[this.articleImageIndex];

HTML

<img #tinderCardImage 
  id="myImage{{index}}" 
  [src]="article.images[0]" 
  [alt]="article.name" >

I can see in "Network" debugger that the new image src is downloaded, but impossible to update/refresh the image displayed...In "Element" debugger I get the initial image.

Moreover, I have a second component where everything works perfectly....

So, If someone has an idea please

CodePudding user response：

You can set the src dynamically on html itself

[src]="articleCards[index].images[articleImageIndex]"