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