如何用角度刷新图像

Question

我需要刷新这样加载的图像：

<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.                   
            }
        });

Answer 1

您可以将时间戳查询附加到图像URL，以强制浏览器重新加载图像。对于托管图像的服务器，这不应有任何负面影响。

更新模板以调用函数：

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

使用可选的timeStamp值计算URL：

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相同，时间戳也会更改，这将迫使浏览器重新加载图像。