How can I update/rebind variable without changing the value?

Ionic Framework ionic-v3
1

I have a RESTful server which have several images.
I am using below URL to get an user’s profile image.

https://example.com/users/jake/profile_image

My Typescript:

...
export class SomePage {

    // this variable is binded to img tag in html
    profile_image: string = 'https://example.com/users/jake/profile_image'; 

    changeProfileImageInServer() {
        // this method changes profile image in the server. 
        // But, the new image has the same URL.
    }
}

The value of variable ‘profile_image’ doesn’t need to change because the new image in the server has the same URL. but I want to change image in html because the profile image has changed. What should I do from now?

Thanks in advance.

2

this will not work because of the image cache of the browser/webview. You should store the timestamp/date, when the image was changed --> so you can add this timestamp to the image url:

'https://example.com/users/jake/profile_image?' + TIMESTAMP
3

Can you put the image in a canvas, call toDataURL, and have Angular2 [src] bound to the variable that contains the toDataURL? I haven’t tried it myself, but it’s the first thing I’d try if I had your situation.

Whoops, I should have waited another couple minutes before posting. Do you know if the cache prevents my idea from working?