如何使用 angular 刷新图像

Question

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

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

在打字稿文件中，我有一个变量 this.linkPicture，我最初将其存储在 link 中。当我更新图片时不刷新。我再次设置变量....

这是我的打字稿代码的一部分

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">

使用可选的时间戳值计算 URL：

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

当URL改变时。创建一个新的时间戳值。

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

即使 URL 相同，时间戳也会更改，这会强制浏览器重新加载图像。

Answer 2

  backgroundImageGenerate()
    {
        var myVar = setInterval(() => {
        this.imageApi();
                   
        console.log(this.isStatusCode);

        if (this.isStatusCode.indexOf(true) - 1) {
            clearInterval(myVar);
        }
        }, 15000)
    }

generateImage(){
        this.campaignsService.generateImage(this.params.id).subscribe((response: any) => {
            this.backgroundImageGenerate();
        }, (error) => {
            this.notify.error('Something went wrong');
            console.log(error)
        })
    }

<button type="button" (click)="generateImage()" mat-raised-button color="primary"
      [title]="'ADD_CAMPAIGN_PRODUCT' | translate:lang" style="margin:5px;">
      <i class="material-icons">add_circle</i>{{ 'GENERATE_IMAGE' | translate:lang }}
</button>

Answer 3

你可以这样试试。至少我解决了这个问题

在您的 .ts 文件上

export class MainLayoutComponent implements OnInit {
public isDesktopDevice: boolean = true;
public sidebarBackgroundClass!: string;


public sideBarOpen: boolean = true; // *sidebar is open by default
}

ngOnInit(): void {
if (this.isDesktopDevice) { this.sidebarBackgroundClass = this.getLayoutBackground(); 
}

public getLayoutBackground(): string {
const bgs: string[] = [
  'side1-1',
  'side1-2',
  'side2-1',
  'side2-2',
];

const max = bgs.length;
const min = 0;
const index = Math.floor(Math.random() * (max - min)) + min;
const bgClass = bgs[index];
return bgClass;

然后像这样将照片一张一张添加到您的 css 文件中：

.css

.side1-1{ background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url('/assets/images/side/side1.1.jpg') !important;}

最终将 class 添加到您的 html:

<mat-drawer [class]="sidebarBackgroundClass"></mat-drawer>

如何使用 angular 刷新图像

How to refresh an image with angular

javascript

data-binding

refresh

image

angular