Как обновить изображение с угловым - PullRequest
Новая
       17

Как обновить изображение с угловым

0 голосов
/ 13 сентября 2018

Мне нужно обновить изображение, которое я загружаю так: 

<img [src]="linkPicture" alt="profile photo" width="150px" height="150px">

В файл машинописи у меня есть переменная this.linkPicture, в которой я изначально храню ссылку. Когда я обновляю картинку, не обновляйся. Я снова установил переменную ....

Вот часть моего машинописного кода 

public linkPicture          : string;

Установить переменную изначально 

this.service.GetProfile(id).subscribe(resp => {
        .....
        this.linkPicture = resp.Photo;
        console.log(resp); //this show the photo
    });

Когда я обновляю картинку 

let dialogRef = this.dialog.open(DialogUploadPhotoComponent, {
        data: {
            patientID: this.ss.getCurrentUserApi().PatientID
        },
        width : "550px",
        });
        dialogRef.afterClosed().subscribe(result => {
            if(result != undefined){
                console.log(result);
                this.linkPicture = result;   //I set the new picture.                   
            }
        });

1 Ответ

0 голосов
/ 13 сентября 2018

Вы можете добавить запрос метки времени к URL-адресу изображения, чтобы браузер перезагрузил изображение.Это не должно иметь негативных побочных эффектов на сервере, на котором размещено изображение.

Обновите шаблон для вызова функции: 

<img [src]="getLinkPicture()" alt="profile photo" width="150px" height="150px">

Вычислите URL, используя необязательное значение timeStamp: 

public getLinkPicture() {
     if(this.timeStamp) {
        return this.linkPicture + '?' + this.timeStamp;
     }
     return this.linkPicture;
}

При изменении URL.Создайте новое значение timeStamp. 

public setLinkPicture(url: string) {
     this.linkPicture = url;
     this.timeStamp = (new Date()).getTime();
}

Даже если URL-адрес совпадает, отметка времени изменится, и это заставит браузер перезагрузить изображение.

...