Firebase认证场景下用户头像Display Url UI显示异常排查

仅Google账号登录时头像功能正常，邮箱密码登录场景下头像显示异常
项目集成Firebase认证能力时，UI端用户头像加载失败，相关业务实现代码如下：

<li onClick={() => setShow(!show)} className="nav-item cursor-pointer relative">
    <div className="flex items-center gap-3">
        <img className="w-14 h-14 rounded-full border p-1" src={user?.photoURL} alt="" />
     </div>
      {show && (
         <ul className="absolute top-[70px] left-0 sm:left-auto sm:right-0">
           <div className="rounded shadow bg-white " data-bs-popper="none">
               <div className="w-[240px] p-5">
                   <div className="pb-0">
                     <div className="flex py-1 items-center gap-2">
                         <img className="rounded-full w-10 h-10" src={loading ? "Loading" : user?.photoURL} alt="profile" />
                         <div className="flex-fill ms-3 ">
                            <h4 className="font-bold">{loading ? "Loading" : user?.displayName}</h4>
                             <small className="">{user?.email}</small>
                         </div>
                      </div>

                      <div>
                         <div className="border-b-2 my-3" /></div>
                      </div>
                 <div className="list-group m-2 flex flex-col gap-3">
               <Link to="/my-profile" className="text-lg">
               <FontAwesomeIcon className="mr-3" icon={faUser} /> Profile Page
              </Link>
              <Link to="/my-inventories" className="text-lg">
              <FontAwesomeIcon className="mr-3" icon={faFileInvoice} /> My Inventories
              </Link>
              <Link onClick={() => signOut(auth)} to="/login" className="text-lg">
              <FontAwesomeIcon className="mr-3" icon={faSignOut} /> Sign Out
          </Link>
       </div>
  </div>
</div>
</ul>
 )}
</li>

邮箱密码登录时UI端异常效果：

排查确认Google登录场景下，img标签可正常获取Google账户的头像地址，显示无异常：

Firebase 邮箱密码认证默认不会自动填充用户对象的photoURL字段：Google这类第三方社交登录，会自动从对应平台拉取用户公开的头像、昵称信息赋值给认证用户对象；但邮箱密码注册/登录流程中，平台没有可拉取的头像数据源，user.photoURL默认值为null，直接将空值赋值给img标签的src属性，就会触发图片加载失败，显示裂图占位。
另外现有代码存在一处明显错误：loading状态下直接将字符串"Loading"传入img的src属性，浏览器会把这个字符串当成图片地址请求，必然触发加载报错。

• 给头像地址增加兜底逻辑，当photoURL为空时渲染项目内置的默认头像，两处img标签都需要修改：

// 替换为项目内存放的默认头像资源路径
const DEFAULT_AVATAR = "/assets/default-avatar.png"
// loading状态不要传字符串，替换为加载动画图片地址，或单独做条件渲染
src={loading ? "/assets/loading.gif" : (user?.photoURL || DEFAULT_AVATAR)}

• 如果需要让邮箱密码注册的用户也能展示自定义头像，可以在注册流程中增加头像设置步骤，调用Firebase Auth提供的updateProfile方法，手动为对应用户的photoURL字段赋值上传后的头像地址即可。

内容的提问来源于stack exchange，提问作者Shamim Reza