在前端开发的过程中，我们时常需要使用头像来展示用户信息。然而，有些用户可能没有上传过头像，这时候就需要使用默认头像来代替。为了解决这个问题，我们可以使用 npm 包中的 fallback-avatar。
安装
使用 npm 安装 fallback-avatar，输入以下命令即可：
--- ------- --------------- ------
使用
在使用 fallback-avatar 之前，需要导入包：
------ -------------- ---- ------------------
fallback-avatar 提供了以下 api：
getAvatarUrl(style: string, name: string)
根据用户 name 和 style，返回一个头像的 url。其中，style 可以是以下几种：
'male''female''identicon''initials''monsterid''retro''robohash'
name 则可以是用户的名字或者 ID。示例代码如下：
----- --- - ---------------------------------------- --------
以上代码返回的 url 的样式为 identicon，以 name 'John' 为参数生成。如果 name 参数为空，则 fallback-avatar 会生成一个随机的字符串作为参数。
getAvatarDOM(style: string, name: string)
根据用户 name 和 style，返回一个头像的 DOM 节点。示例代码如下：
----- --- - ---------------------------------------- -------- -------------------------------
以上代码将生成一个 identicon 样式的头像，并将其渲染到文档中。
指南
fallback-avatar 可以让我们更加方便地展示默认头像，同时也可以保证头像的风格统一。在使用时，可以根据具体情况选择需要的样式，同时也可以根据需求对 fallback-avatar 进行自定义。
示例代码
------ -------------- ---- ------------------ -- ---- --- ----- --- - ---------------------------------------- -------- -- --------- ----- --- - ---------------------------------------- -------- -------------------------------
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055fe881e8991b448dd8c8