我從 server 用 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;
}
uj5u.com熱心網友回復：
現在您從資產而不是 API 服務器讀取影像！
但我試試你的代碼，并改變*ngIf="imgLoad == false"以*ngIf="imgLoad === false"＆[hidden]="imgLoad == false"來[hidden]="imgLoad === false"，所以它的做工精細
stackblitz 鏈接：https ://stackblitz.com/edit/angular-nnefsj ? file = src/app/app.component.html
只需為骨架和影像設定您最喜歡的寬度和高度。
如果您需要從 ts 檔案中的服務使用 scr，只需[src]在 img 標簽中使用。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/376468.html
標籤：javascript 有角的 图片 延迟加载
上一篇：如何在c#中裁剪帶有多邊形的影像
下一篇：將影像添加到陣列