用户图像“显示URL”当我使用firebase进行身份验证时，在UI上显示不正确

Question

注意：基于电子邮件password的登录工作正常工作才能在使用Google登录时发生。

    <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

即使IMG也获得了Google用户映像。

Answer 1

我大约一个月迟到，但我认为我发现答案

与图像的参考政策有关。

因此，在图像中添加referrerpolicy =“ no-the Referrer”。

希望这能解决您的问题。