How to get page to refresh when I change an image

Ionic Framework Ionic Angular
1

I’ve worked on this problem for a while - and finally just decided to move on - but I thought perhaps if I posted the problem, someone would provide some insight.

I’ve found that I need to trust that angular will update the page when I change underlying data - but so far I’ve not figured out how to make this particular problem work.

I have a profile page where a user can change his profile picture. The html to display the image is this:

<img [src]=“userProfileURL” class=“avatar”>

In the TS file, after the user changes the picture - I go to a lot of work to change the path (userProfileURL) several times - but once it’s set to the new URL - the page does not refresh, and the old picture remains in view

This is not acceptable, but I’m not sure how to make this work.

Any ideas? Thanks very much in advance!

2

See if you can reproduce my scratch app, and if it does what you expect it to. If so, look for differences between it and what you have.

I took apple, blackberry, and cherry photos from know your fruit, and put them in the assets folder named apple.jpg, blackberry.jpg, and cherry.jpg.

app.component.ts

export class AppComponent {
  fruits = ["apple", "blackberry", "cherry"];
  chosenFruit = "";
  photo = "";

  chooseFruit(f: string): void {
    this.chosenFruit = f;
    this.photo = `/assets/${f}.jpg`;
  }
}

app.component.html

<ion-app>
<ion-content>
  <ion-select [ngModel]="chosenFruit" (ngModelChange)="chooseFruit($event)">
    <ion-select-option *ngFor="let fruit of fruits">{{fruit}}</ion-select-option>
  </ion-select>

  <div>
    <img [src]="photo">
  </div>
</ion-content>
</ion-app>

When I select any given fruit, the photo changes for me.