如何用角度刷新图像

Posted 2023-02-22

【中文标题】如何用角度刷新图像

【英文标题】：How to refresh an image with angular

【发布时间】：2019-02-18 07:58:52

【问题描述】：

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

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

【问题讨论】：

你是如何更新图片的？你的意思是你要更新链接/链接的内容？

是的，当然，我将新链接放入服务的响应中并设置变量。

如果您能向我们展示一些代码会更好......这将有助于回答者准确指出您遗漏的地方

我猜你正在更新服务器端的图像并且 URL 保持不变。如果不是这种情况，请告诉我，我将删除我的答案。

是的，我在 API 上更新了图像，我通过图像的新链接得到了响应。它看起来像一个缓存不更新。我不知道会发生什么。

【参考方案1】：

你可以这样试试。至少我解决了喜欢这个

在您的 .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;

最终添加到你的 html 的类：

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

【参考方案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>

【参考方案3】：

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

更新模板以调用函数：

<img [src]="getLinkPicture()"   >

使用可选的时间戳值计算 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 相同，时间戳也会发生变化，这会迫使浏览器重新加载图像。

【讨论】：

你救了我的命，我尝试生成一个新的净化 URL，但不知何故在 ionic+android 上它不起作用