Leí la imagen src con la API del servidor. Quiero que la imagen no se muestre hasta que esté completamente cargada y mostrar el esqueleto mientras se carga (las imágenes se muestran en secciones y quiero que el esqueleto se destruya cuando la imagen se muestre por completo) este es mi código pero no lo es trabajando como se esperaba
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; }¡ahora mismo lees la imagen de los activos, no del servidor API!
pero pruebo tu código y cambio *ngIf="imgLoad == false" a *ngIf="imgLoad === false" & [hidden]="imgLoad == false" a [hidden]="imgLoad === false" , así que funciona bien
el enlace de stackblitz: https://stackblitz.com/edit/angular-nnefsj?file=src/app/app.component.html
Simplemente configure su ancho y alto favoritos para el esqueleto y la imagen.
Si necesita usar scr de un servicio en el archivo ts, simplemente use [src] en la etiqueta img.