如何在 Angular Web 应用中显示来自其他来源的图片?

htmlweb developmentfront end technology更新于 2025/3/30 0:12:17

使用 Assets 目录

我们可以先将图片放置在项目的 assets 目录中，然后在 Angular 中提供图片服务。我们可以创建一个单独的图片目录，也可以直接将其保留在 assets 目录中。将所有需要的图片放置在 assets 目录中后，就可以打开要提供图片服务的特定组件 TypeScript (.ts) 文件。现在，我们可以将图片的 URL 存储在 Object() { [native code] } 函数中的一个变量中，以便在组件创建时对其进行初始化。

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 指令可以轻松实现图像加载性能的最佳实践。它通过以下方式优先加载"最大内容绘制"图像:

在 <img> 上设置 fetchpriority 属性标签自动加载。
确保其他图片默认加载缓慢。
断言文档头包含相应的预连接链接标签。

除了优化 LCP 图片的加载之外，NgOptimizedImage 还强制执行了许多图片最佳实践:

使用图片 URL 进行图片优化
必须指定宽度和高度。
如果宽度或高度设置不正确，则会通知您。
如果图片在渲染时会出现视觉扭曲，此函数会通知您。

该指令必须导入到我们的应用程序中。我们还需要设置一个图像加载器。

要在模板中使用 NgOptimizedImage 指令，我们必须将图像的 src 属性替换为 ngSrc。

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

内置的第三方加载器会在 src 前添加一个共享的基 URL。为了避免不必要的重复，如果我们使用其中一个加载器(或任何其他具有此功能的加载器)，则必须从 src 中移除共享的基 URL 路径。

我们还必须指定宽度和高度。这样做是为了避免与图像相关的布局更改。宽度和高度属性应反映图像的固有大小。在开发过程中，如果宽度和高度属性设置不正确，NgOptimizedImage 会发出警告。

为了确保 LCP 图像尽快加载，我们可以为您的图像来源添加预连接资源提示。最好在文档的 <head> 中添加资源提示。

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

如果我们使用第三方图片服务的加载器，NgOptimizedImage 指令会在开发过程中检测到提供 LCP 图片的源没有预连接资源提示时发出警告。要禁用这些警告，请将 EnsurePreconnect: false 添加到我们所选图片服务的提供程序工厂参数中:

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

为图片添加 width 和 height 属性可能会导致其渲染效果因样式而异。如果我们的图片样式导致宽高比扭曲，NgOptimizedImage 会发出警告。这通常可以通过在图片样式中添加 height: auto 或 width: auto 来解决。

我们必须替换 <img> 中的 srcset 属性。带有 ngSrcset 的标签。如果存在 ngSrcset 属性，NgOptimizedImage 会使用已配置的图片加载器生成并设置 srcset 属性。该指令会根据 ngSrc 推断出此信息，因此请勿在 ngSrcset 中包含图片文件名。该指令同时接受宽度描述符(例如 100w)和密度描述符(例如 1x)。