在 Angular2 中显示图像

在 Angular2 中，显示图像（即图片）是一件非常简单的事情，只需使用 <img> 标签，给定其 src 属性即可，这并不需要 Angular2 的任何特殊支持。然而，在一些情况下，比如说加载图片的时候，我们需要使用一些特殊的指令或者组件。下面是一些使用案例。

1. 显示静态图片

要显示一张静态图片，只需要在 HTML 模板中使用 <img> 标签，同时把图片的路径加到 src 属性中即可。比如：

<img src="path/to/image.jpg" alt="image">

如果这张图片是放在项目中的，可以使用相对路径（例如 assets/images/image.jpg）。如果是从网络上加载，则需写上完整的 URL。

2. 图片懒加载

图片懒加载是一种延迟加载图片的技术。通常情况下，页面中的所有图片都会在页面加载时一同加载，这会导致页面加载缓慢，影响用户体验。而懒加载则可以将图片的加载推迟到用户滚动到图片所在的位置时再加载。

Angular2 已经有一些支持图片懒加载的第三方库了，比如 ngx-lazyload-image。这个库提供了 <img> 组件，将图片懒加载非常简单。这里演示一下怎么用这个库来实现图片懒加载：

1. 安装 ngx-lazyload-image：

   npm install ngx-lazyload-image --save
   

2. 在 app.module.ts 中导入 NgxLazyLoadImageModule 并将其添加到 imports 数组中：

   import { NgxLazyLoadImageModule } from 'ngx-lazyload-image';
   
   @NgModule({
       imports: [
           NgxLazyLoadImageModule
       ]
   })
   

3. 在 HTML 中使用 <ngx-lazy-load-image> 组件：

   <ngx-lazy-load-image
       [defaultImage]="'assets/images/loading.gif'"
       [errorImage]="'assets/images/error.png'"
       [lazyLoad]="imagePath">
   </ngx-lazy-load-image>
   

   defaultImage 是当图片加载时的占位符，errorImage 是加载出错时的占位符，lazyLoad 则是图片路径。

3. 显示 SVG 图像

SVG 是一种矢量图形格式，相对于位图格式（如 JPG，PNG等）有很多优势，因此越来越受到开发者们的喜爱和使用。在 Angular2 中，显示 SVG 图像也很简单，只需要使用 <img> 标签，并把 SVG 图像的路径加在 src 属性中即可。例如：

<img src="path/to/image.svg" alt="image">

如果需要内联的方式，可以使用 innerHTML：

<div [innerHTML]="svgContent"></div>

svgContent 是一个字符串，表示 SVG 图像的内容。

4. 使用自定义的指令

有时候，在项目中需要自己定义一些指令来显示一些特定的图像。例如，在一个音乐项目中，可以自定义一个指令来显示一张唱片封面。下面是一个简单的例子：

1. 先创建一个自定义指令：

   import { Directive, ElementRef, Input, HostListener } from '@angular/core';
   
   @Directive({
       selector: '[appAlbumCover]'
   })
   export class AlbumCoverDirective {
       @Input('appAlbumCover') imagePath: string;
   
       constructor(private el: ElementRef) {
       }
   
       @HostListener('mouseenter')
       onMouseEnter() {
           this.addCover();
       }
   
       @HostListener('mouseleave')
       onMouseLeave() {
           this.removeCover();
       }
   
       private addCover() {
           const element = this.el.nativeElement;
           element.style.backgroundImage = `url(${this.imagePath})`;
           element.style.backgroundRepeat = 'no-repeat';
           element.style.backgroundSize = 'contain';
           element.style.backgroundPosition = 'center';
       }
   
       private removeCover() {
           const element = this.el.nativeElement;
           element.style.backgroundColor = null;
           element.style.backgroundImage = null;
           element.style.backgroundRepeat = null;
           element.style.backgroundSize = null;
           element.style.backgroundPosition = null;
       }
   }
   

   上面这个指令会在鼠标悬浮在指定的元素上时，将元素的背景设置为给定的图片。当鼠标离开后，背景又消失。

2. 在 HTML 中使用这个指令：

   <div appAlbumCover="path/to/image.jpg"></div>
   

   注意，这个指令只能应用在一个带有背景色的元素上。如果这个元素没有背景，则指令的功能会失效。

至此，本文介绍了在 Angular2 中显示图像的四种情况以及相应的解决方案。无论是显示静态图片，懒加载图片，还是显示 SVG，都非常简单。如果需要自己定义指令来处理一些更加特殊的情况，Angular2 的指令系统也提供了很好的支持。