如何在 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）。

更新于：2023年9月12日

548 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始
广告