CODEWITHSUNDEEP
javascriptangularimagedata-bindingrefresh
Yoedusvany Hdez
Yoedusvany Hdez

Reputation: 445

How to refresh an image with angular

I need to refresh an image that I load like this:

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

Into the typescript file I have a variable this.linkPicture that I store initially the link. When I update the picture don't refresh. I set the variable again....

Here is part of my typescript code

public linkPicture          : string;

Set the variable initially

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

When I update the picture 

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

Upvotes: 17

Views: 20149

Answers (3)

Emre Koca
Emre Koca

Reputation: 1

you can try like this. at least I solve liked this

on your .ts file

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;

then add photos to your css file one by one like this:

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

the final add class to your html:

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

Upvotes: 0

Darshan Malani
Darshan Malani

Reputation: 476

  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>

Upvotes: -1

Reactgular
Reactgular

Reputation: 54771

You can append a timestamp query to the image URL to force the browser to reload the image. This shouldn't have any negative side effects with the server hosting the image.

Update the template to call a function:

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

Compute the URL using an optional timeStamp value:

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

When the URL is changed. Create a new timeStamp value.

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

Even if the URL is the same the timestamp changes, and this forces the browser to reload the image.

Upvotes: 39

Related Questions