在 Angular 17 中如何显示占位符，直到使用 @defer 完全加载图像

Question

这是一个项目列表，每个项目都包含一个图像，我想显示占位符，直到加载该卡中的图像为止 @defer() 中的条件是什么

@for (item of places; track $index) {
    @defer (){
    <div [routerLink]="['/place/'+item.id]" class="row item container-fluid py-2" style="cursor: pointer;">
        <div class="col-lg-4">
            <img style="height: 250px;" src="{{item.image}}" alt="">
        </div>
        <div class="col-lg-8 pt-4">
            <h4>{{item.name}}</h4>
            <h5 class="text-secondary">{{item.adress}}</h5>
            <h6 class="text-secondary">
                {{item.bio| truncate:200 }}

            </h6>
            <div class="d-flex align-items-center">
                <p class="fw-bold m-0 me-2">{{calculateAverageRate(item)| number:'1.1-1'}}/5</p>
                <div class="rating">
                    <input value="5" name="rating" id="star5" type="radio">
                    <label [style.color]="calculateAverageRate(item)>=5? '#6f00ff' : '#acacac'" for="star5"></label>
                    <input value="4" name="rating" id="star4" type="radio">
                    <label [style.color]="calculateAverageRate(item)>=4? '#6f00ff' : '#acacac'" for="star4"></label>
                    <input value="3" name="rating" id="star3" type="radio">
                    <label [style.color]="calculateAverageRate(item)>=3? '#6f00ff' : '#acacac'" for="star3"></label>
                    <input value="2" name="rating" id="star2" type="radio">
                    <label [style.color]="calculateAverageRate(item)>=2? '#6f00ff' : '#acacac'" for="star2"></label>
                    <input value="1" name="rating" id="star1" type="radio">
                    <label [style.color]="calculateAverageRate(item)>=1? '#6f00ff' : '#acacac'" for="star1"></label>
                </div>
            </div>

        </div>
    </div>}
    @placeholder {
<div>placeholder </div>
    }

我的代码中的延迟条件为空，填充它的条件是什么

Answer 1

您可以使用角度指令

NgOptimizedImage

来制作占位符或使用各种选项来实现您所需要的。当我使用带有 dataURL 图像的占位符时，请找到下面的工作示例，该图像将在图像加载之前加载，

NgOptimizedImage 的完整文档

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { CommonModule, NgOptimizedImage } from '@angular/common';
import { PLACEHOLDER_CONSTANT } from './placeholder';
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgOptimizedImage, CommonModule],
  template: `
    @for (item of places; track $index) {
    <div class="row item container-fluid py-2" style="cursor: pointer;">
        <div class="col-lg-4" style="position: relative">
            <img style="height: 250px;" [ngSrc]="item.image" alt="" height="250" width="500" [placeholder]="placeholder">
        </div>
        <div class="col-lg-8 pt-4">
            <h4>{{item.name}}</h4>
            <h5 class="text-secondary">{{item.address}}</h5>
            <h6 class="text-secondary">
                {{item.bio }}

            </h6>
            <div class="d-flex align-items-center">
                <p class="fw-bold m-0 me-2">{{15| number:'1.1-1'}}/5</p>
                <div class="rating">
                    <input value="5" name="rating" id="star5" type="radio">
                    <label [style.color]="1>=5? '#6f00ff' : '#acacac'" for="star5"></label>
                    <input value="4" name="rating" id="star4" type="radio">
                    <label [style.color]="2>=4? '#6f00ff' : '#acacac'" for="star4"></label>
                    <input value="3" name="rating" id="star3" type="radio">
                    <label [style.color]="5>=3? '#6f00ff' : '#acacac'" for="star3"></label>
                    <input value="2" name="rating" id="star2" type="radio">
                    <label [style.color]="6>=2? '#6f00ff' : '#acacac'" for="star2"></label>
                    <input value="1" name="rating" id="star1" type="radio">
                    <label [style.color]="7>=1? '#6f00ff' : '#acacac'" for="star1"></label>
                </div>
            </div>

        </div>
    </div>
    }
  `,
})
export class App {
  placeholder = PLACEHOLDER_CONSTANT;
  name = 'Angular';
  places = [
    {
      image: 'https://placehold.co/6000x4000',
      name: 'test',
      address: 'test',
      bio: 'test',
    },
    {
      image: 'https://placehold.co/6000x4000',
      name: 'test',
      address: 'test',
      bio: 'test',
    },
    {
      image: 'https://placehold.co/6000x4000',
      name: 'test',
      address: 'test',
      bio: 'test',
    },
    {
      image: 'https://placehold.co/6000x4000',
      name: 'test',
      address: 'test',
      bio: 'test',
    },
  ];
}

bootstrapApplication(App);

Stackblitz 演示