@9hub/ngx-avatar 是一个 Angular 组件，用于显示用户头像。它可以自定义头像大小、形状、边框、背景颜色和文字颜色等属性。通过 @9hub/ngx-avatar，我们可以快速、方便地在 Angular 项目中添加头像展示功能。
安装
使用 npm 进行安装：
npm install @9hub/ngx-avatar --save
使用
导入模块
在需要使用 @9hub/ngx-avatar 的模块中导入 AvatarModule：
import { AvatarModule } from '@9hub/ngx-avatar';
@NgModule({
imports: [AvatarModule],
// ...
})
export class MyModule { }添加组件
在模板文件中添加 ngx-avatar 组件，并设置相应的属性：
<ngx-avatar [name]="name" [size]="size" [shape]="shape" [src]="src" [bgColor]="bgColor" [textColor]="textColor"></ngx-avatar>
其中，各个属性的含义如下：
name：显示的用户名或用户昵称。size：头像的宽度和高度，单位为像素。默认值为100。shape：头像的形状。可选值包括square和rounded。默认为square。src：头像的图片地址。如果设置了src，则优先使用图片作为头像。默认值为null。bgColor：头像的背景颜色。默认为#ccc。textColor：文字的颜色。默认为白色（#fff）。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------
--------- -
----------- ------------- ------------- --------------- ----------- ------------------- -------------------------------------
-
--
------ ----- ----------- -
---- - ------
---- - ----
----- - ----------
--- - ------------------------------
------- - ----------
--------- - -------
-示例
下面是一个完整的示例，展示了如何使用 @9hub/ngx-avatar 显示用户头像：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------
--------- -
-------------
---- ----------------
----------- ------------- ------------- --------------- ------------------- -------------------------------------
----------- ------------- ------------- ------------------- ------------------- -------------------------------------
----------- ------------- ------------- ------------------- --------------------------
----------- ------------- ------------- ------------------- --------------------------
------
--
------- --
-------- -
-------- -----
---------------- -------
------------ -------
-
--
--
------ ----- ----------- -
---- - ------
---- - ----
----- - ---------
------- - ----------
--------- - -------
---- - ------------------------------
---- - --------------------------------
-该示例演示了如何创建一个包含四个头像的页面。第一个头像显示了 Tom 的首字母，带有默认的方形样式和背景颜色。第二个头像是第一个头像的圆形版本。第三个头像使用了 Tom 的个人头像图片，采用默认的圆形样式。第四个头像也使用了一个用户的头像图片，但采用的是方形样式。这个示例展示了如何使用 @9hub/ngx-avatar 实现各种不同的头像展示效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672683660cf7123b36621