在 Angular 12 内完成加载后显示完整图像

Question

我从服务器读取带有 API 的图像 src。我希望图像在完全加载之前不显示，而是在加载时显示骨架（图像显示在部分中，我希望在图像完全显示时销毁骨架）这是我的代码，但它没有按预期工作

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

Answer 1

现在你从资产而不是 API 服务器读取图像！

但我尝试了你的代码并将 *ngIf="imgLoad == false" 更改为 *ngIf="imgLoad === false" 并将 [hidden]="imgLoad == false" 更改为 [hidden]="imgLoad === false"，所以它工作正常

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

只需为骨架和图像设置您喜欢的宽度和高度即可。

如果您需要在 ts 文件中使用来自服务的 scr，只需在 img 标签中使用 [src]。

在 Angular 12 内完成加载后显示完整图像

show full image after load is completed in Angular 12

javascript

lazy-loading

image

angular