Comment rafraîchir une image avec Angular

Question

J'ai besoin de rafraîchir une image que je charge de cette manière :

Dans le fichier typescript, j'ai une variable this.linkPicture dans laquelle je stocke initialement le lien. Lorsque je mets à jour l'image, elle ne se rafraîchit pas. Je réinitialise la variable...

Voici une partie de mon code typescript

public linkPicture          : string;

Initialisation de la variable

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

Lorsque je mets à jour l'image

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;   //Je définis la nouvelle image.                   
            }
        });

Answer 1

Vous pouvez ajouter une requête de timestamp à l'URL de l'image pour forcer le navigateur à recharger l'image. Cela ne devrait pas avoir d'effets secondaires négatifs sur le serveur hébergeant l'image.

Mettre à jour le modèle pour appeler une fonction :

Calculer l'URL en utilisant une valeur de timeStamp optionnelle :

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

Lorsque l'URL est modifiée. Créez une nouvelle valeur de timeStamp.

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

Même si l'URL est la même, le timestamp change, et cela force le navigateur à recharger l'image.

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

      add_circle{{ 'GENERATE_IMAGE' | translate:lang }}

Answer 3

Vous pouvez essayer comme ceci. Au moins, j'ai résolu cela de cette manière

sur votre fichier .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;

puis ajoutez des photos à votre fichier css une par une comme ceci :

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

enfin, ajoutez la classe à votre html :