哈囉,各位邦友們!
昨天實作了不少東西,感覺一不小心塞太多了。
今天只要在細節頁加入英雄頭像,並使用 NgOptimizedImage 優化就好。
HeroDetail 導入 NgOptimizedImage,讓頭像載入更有效率。npm run start,確認 in-memory API 與 zoneless 設定皆正常。一、導入 NgOptimizedImage
新版 Angular 內建的 NgOptimizedImage 能自動加上 loading="lazy"、預先載入策略與寬高屬性。
我們把它放進 HeroDetail 並利用 DiceBear 的圖像 API:
https://api.dicebear.com/7.x/bottts-neutral/png?seed=<HeroName>&size=320&background=%23eef3ff
這樣就不需要額外放圖檔,也能依英雄名稱產生一致的頭像。
// projects/hero-journey/src/app/hero-detail/hero-detail.ts
import { Component, DestroyRef, computed, effect, inject, input, signal } from '@angular/core';
// ...existing code...
import { RouterModule } from '@angular/router';
import { NgOptimizedImage } from '@angular/common';
@Component({
  // ...existing code...
  imports: [RouterModule, NgOptimizedImage],
  // ...existing code...
})
export class HeroDetail {
  // ...existing code...
  readonly avatarUrl = computed(() => {
    const hero = this.hero();
    if (!hero) {
      return null;
    }
    const seed = encodeURIComponent(hero.name);
    return `https://api.dicebear.com/7.x/bottts-neutral/png?seed=${seed}&size=320&background=%23eef3ff`;
  });
  // ...existing code...
}
<!-- projects/hero-journey/src/app/hero-detail/hero-detail.html -->
@if (loading()) {
  <!-- ...existing code... -->
} @else if (error(); as e) {
  <!-- ...existing code... -->
} @else if (hero(); as h) {
  <section class="detail">
    @if (avatarUrl(); as src) {
      <figure class="detail__media">
        <img
          [ngSrc]="src"
          width="320"
          height="320"
          [attr.fetchpriority]="h.rank === 'S' ? 'high' : null"
          alt="{{ h.name }} portrait" />
      </figure>
    }
    <!-- ...existing code... -->
  </section>
} @else {
  <!-- ...existing code... -->
}
// projects/hero-journey/src/app/hero-detail/hero-detail.scss
// ...existing code...
.detail__media {
  margin: 0 0 16px;
  display: flex;
  justify-content: center;
}
.detail__media img {
  border-radius: 16px;
  box-shadow: 0 12px 24px rgba(27, 54, 93, 0.18);
}
HeroDetail 顯示的頭像具有 ngSrc、loading="lazy",另外因為 Rank S 英雄有設定[attr.fetchpriority]=high的圖片優先載入。
 
今天在英雄細節頁使用 DiceBear 的 API 產生圖像,並透過 NgOptimizedImage 這種現代化特性讓圖片最佳化。
下一階段會開始處理更進階的體驗與部署,今天稍微放鬆一下!