如何在 Angular Web 應用程式中顯示來自其他來源的影像？

---

使用 Assets 目錄

我們可以透過首先將影像放置在專案的 assets 目錄中來在 Angular 中提供影像服務，我們可以在其中為影像建立單獨的目錄，或者像這樣簡單地將其保留在 assets 目錄中。一旦我們將所有需要的影像放置在 assets 目錄中，我們就可以開啟我們想要提供影像服務的特定元件 TypeScript (.ts) 檔案。現在，我們可以在 function Object() { [native code] } 中的變數中儲存影像的 URL，以便在建立元件時對其進行初始化。

Demo.Component.ts

import { Component, OnInit } from '@angular/core';
@Component ({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})  
export class DemoComponent implements OnInit {
  ImagePath: string;
  constructor() {
    //image location
    this.ImagePath = '/assets/images/sample_img.jpg'
  }
  ngOnInit() {
  }
}

要檢索影像，我們現在必須修改元件的模板檔案。

Demo.Component.html

<!--...header and body content-->
<mat-card class= "example-card" >
  <mat-card-header class= "example-header" 
                   style= "padding-left: 30%;">
   <h2><span></span> Tutorials Point </h2  >
  </mat-card-header>
  <mat-card-content>
    <img [src] = "ImagePath" 
          style= "width: 600px; height: 400px;">
  </mat-card-content>
</mat-card>
<!--... body and footer content-->

我們還可以透過提供影像的完整有效 URL，直接從網站或資料庫（例如 Firebase）獲取 Web 影像。

預設情況下，Angular 中的影像和其他媒體是從專案資料夾內的 assets 目錄中獲取的（預設情況下，所有其他專案目錄對元件都不公開），但這可以透過修改 angular-cli.json 來更改。我們可以透過將其包含在 assets 物件屬性中，將我們的媒體目錄包含在此 JSON 檔案中。

"assets": [
 "assets",
 "img",
 "favicon.ico",
 ".htaccess"
]

使用 NgOptimizedImage

NgOptimizedImage 指令簡化了實現影像載入效能最佳實踐的過程。它透過以下方式優先載入最大內容繪製圖像：

• 自動在 `` 標籤上設定 fetchpriority 屬性。

• 確保其他影像預設情況下載入緩慢。

• 斷言文件頭部包含相應的預連線連結標籤。

除了最佳化 LCP 影像的載入之外，NgOptimizedImage 還強制執行許多影像最佳實踐

• 使用影像 URL 進行影像最佳化

• 必須指定寬度和高度。

• 如果寬度或高度設定不正確，則會通知您。

• 如果渲染時影像會發生視覺扭曲，則此函式會通知您。

必須將指令匯入到我們的應用程式中。我們還需要設定一個影像載入器。

要在模板中使用 NgOptimizedImage 指令，我們必須將影像的 src 屬性替換為 ngSrc。

<img ngSrc="sample_image.jpg" width="200" height="80">

內建的第三方載入器會在 src 字首新增一個共享的基本 URL。為了避免不必要的重複，如果我們使用其中一個載入器（或任何執行此操作的其他載入器），則必須從 src 中刪除共享的基本 URL 路徑。

我們還必須指定寬度和高度。這樣做是為了避免與影像相關的佈局更改。寬度和高度屬性應反映影像的固有大小。在開發過程中，如果寬度和高度屬性設定不正確，NgOptimizedImage 會發出警告。

為了確保 LCP 影像儘快載入，我們可以為影像來源新增預連線資源提示。最好在文件的 `` 中包含資源提示。

<link rel="preconnect" href="https://my.cdn.origin" />

如果我們對第三方影像服務使用載入器，則如果檢測到提供 LCP 影像的來源沒有預連線資源提示，NgOptimizedImage 指令會在開發過程中向我們發出警告。要停用這些警告，請將 ensurePreconnect: false 新增到我們選擇的影像服務的提供程式工廠引數中。

providers: [
  provideImgixLoader('https://my.base.url', {ensurePreconnect: false})
],

向影像新增寬度和高度屬性可能會導致其呈現方式根據其樣式而有所不同。如果我們的影像樣式導致縱橫比失真，NgOptimizedImage 會向我們發出警報。這通常透過向影像樣式新增 height: auto 或 width: auto 來解決。

我們必須將 `` 標籤中的 srcset 屬性替換為 ngSrcset。如果存在 ngSrcset 屬性，則 NgOptimizedImage 會使用已配置的影像載入器生成並設定 srcset 屬性。指令從 ngSrc 推斷此資訊，因此不要在 ngSrcset 中包含影像檔名。指令接受寬度描述符（例如，100w）和密度描述符（例如，1x）。