show full image after load is completed in Angular 12-CodePudding

I read image src with API from server . I want the image not to be displayed until it is completely loaded and to display the skeleton instead while loading(images are displayed in sections and I want the skeleton to be destroyed when the image is fully displayed) this is my code but it is not working as expected

HTML:

<div class="col-12 p-0">
     <ngx-skeleton-loader *ngIf="imgLoad == false" count="1" [theme]=" 
         {'borderradius':'7', 'background-color': '#ccc','margin-top':'0', 'min-height': 
         '25vh','width':'100%' }"></ngx-skeleton-loader>
     <img (load)="loadImage()" [hidden]="imgLoad == false" src="assets/image/job1.jpg" 
         alt="" class="w-100 h-auto image-border">
  </div>

TS :

imgLoad:boolean = false;


  loadImage(){
    this.imgLoad = true;
  }

CodePudding user response：

right now you read image from assets not API server!

but I try your code and change *ngIf="imgLoad == false" to *ngIf="imgLoad === false" & [hidden]="imgLoad == false" to [hidden]="imgLoad === false", so it's work fine

the stackblitz link: https://stackblitz.com/edit/angular-nnefsj?file=src/app/app.component.html

Just set your favorite width and height for skeleton and image.

If you need to use scr from a service in ts file just use [src] in img tag.