如何在 Angular2 中显示图像？

我们可以通过首先将图像放在项目的资产目录中来在 angular2 中提供图像，您可以在其中为图像创建特定目录或将其保持在资产目录中。
将所有必需的图像放入资产目录后，打开要在其中提供图像的特定组件打字稿 (.ts) 文件。现在，您可以在构造函数中的变量中添加图像的 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.jpg'
  }
  
  ngOnInit() {
  }
  
}

现在修改组件的模板文件以获取图像。
Demo.Component.html

  

  
   
GeeksforGeeks
  
  
    
  

  

输出：

您还可以通过提供图像的完整有效 URL 直接从网站或数据库（例如 Firebase）获取网络图像。

笔记：
在 angular2 中，图像和其他媒体默认从项目文件夹中的资产目录中获取（项目的所有其他目录默认情况下不对组件公开）这可以通过修改angular-cli.json进行更改。在此 JSON 中文件通过将其添加到资产对象属性中来添加您的媒体目录。

//add a new directory or image to start fetching from that location
  
"assets": [
 "assets",
 "img",
 "favicon.ico",
 ".htaccess"
]