Angular显示图片示例

大脑经常闹风暴@小猿

已于 2022-02-07 21:16:22 修改

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： angular 文章标签： angular.js typescript

于 2022-02-07 21:03:51 首次发布

本文链接：https://blog.csdn.net/qq_39962271/article/details/122814715

angular 专栏收录该内容

30 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

这篇博客详细介绍了在Angular项目中如何显示图片的步骤，包括新建模块、添加home模块到主页、在src/assets/images目录下存放图片，以及在组件中定义变量和编辑HTML模板，最后启动服务查看效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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、页面显示如图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5rptjba8-1644238937107)(C:\Users\17216\AppData\Roaming\Typora\typora-user-images\image-20220207173321403.png)]$