Angular显示图片示例

Angular 显示图片 示例

首先，进行Angular环境的搭建和项目创建

ctrl + c 结束服务

1、新建模块

ng g component components/home

如图：

2、将home模块添加到主页

app.component.html，页面代码如下，没有看错，只有一行

<app-home></app-home>

3、src/assets目录下新建目录：images

4、复制一张图片到images文件夹

5、home.component.ts中定义一个变量

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

//定义一个图片链接的变量
public imageURL='https://www.baidu.com/img/flexible/logo/pc/result.png';
  constructor() { }

  ngOnInit(): void {
  }

}

6、编辑home.component.html 如下

<h1>1、引入静态地址图片</h1>
<img src="assets/images/happy.png" alt="happyday"/>
<h1>2、引入图片链接</h1>
<img [src]="imageURL"/>

7、启动服务 ，终端输入

ng serve --open

8、页面显示如图：