chore: tweak proxyimg for avatar

packages/app/src/Element/ProxyImg.tsx

@@ -1,22 +1,21 @@
 import useImgProxy from "@/Hooks/useImgProxy";
-import React, { useState } from "react";
+import React, { HTMLProps, ReactNode, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { getUrlHostname } from "@/SnortUtils";
 
-interface ProxyImgProps extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+type ProxyImgProps = HTMLProps<HTMLImageElement> & {
   size?: number;
   className?: string;
+  promptToLoadDirectly?: boolean;
+  missingImageElement?: ReactNode;
 }
 
-export const ProxyImg = (props: ProxyImgProps) => {
+export const ProxyImg = ({ size, className, promptToLoadDirectly, missingImageElement, ...props }: ProxyImgProps) => {
   const { proxy } = useImgProxy();
   const [loadFailed, setLoadFailed] = useState(false);
   const [bypass, setBypass] = useState(CONFIG.bypassImgProxyError);
 
-  if (loadFailed) {
-    if (bypass) {
-      return <img className={props.className} {...props} width={props.size} height={props.size} />;
-    }
+  if (loadFailed && !bypass && (promptToLoadDirectly ?? true)) {
     return (
       <div
         className="note-invoice error"
@@ -34,17 +33,20 @@ export const ProxyImg = (props: ProxyImgProps) => {
       </div>
     );
   }
+  const src = bypass ? props.src : proxy(props.src ?? "", size);
+  if (!src || (loadFailed && !bypass)) return missingImageElement;
   return (
     <img
       {...props}
-      src={props.src ? proxy(props.src, props.size) : ""}
-      width={props.size}
-      height={props.size}
-      className={props.className}
+      src={src}
+      width={size}
+      height={size}
+      className={className}
       onError={e => {
         if (props.onError) {
           props.onError(e);
         } else {
+          console.error("Failed to proxy image ", props.src);
           setLoadFailed(true);
         }
       }}

packages/app/src/Element/User/Avatar.tsx

@@ -6,6 +6,7 @@ import classNames from "classnames";
 
 import { defaultAvatar, getDisplayName } from "@/SnortUtils";
 import { ProxyImg } from "@/Element/ProxyImg";
+import Icon from "@/Icons/Icon";
 
 interface AvatarProps {
   pubkey: string;
@@ -37,10 +38,17 @@ const Avatar = ({ pubkey, user, size, onClick, image, imageOverlay, icons, class
     <div
       onClick={onClick}
       style={style}
-      className={classNames("avatar relative", { "with-overlay": imageOverlay }, className)}
+      className={classNames("avatar relative flex items-center justify-center", { "with-overlay": imageOverlay }, className)}
       data-domain={domain?.toLowerCase()}
       title={getDisplayName(user, "")}>
-      <ProxyImg className="rounded-full object-cover aspect-square" src={url} size={s} alt={getDisplayName(user, "")} />
+      <ProxyImg
+        className="rounded-full object-cover aspect-square"
+        src={url}
+        size={s}
+        alt={getDisplayName(user, "")}
+        promptToLoadDirectly={false}
+        missingImageElement={<Icon name="x" className="warning" />}
+      />
       {icons && <div className="icons">{icons}</div>}
       {imageOverlay && <div className="overlay">{imageOverlay}</div>}
     </div>

packages/app/src/Hooks/useImgProxy.ts

@@ -32,7 +32,7 @@ export function proxyImg(url: string, settings?: ImgProxySettings, resize?: numb
     return urlSafe(base64.encode(result));
   }
   if (!settings) return url;
-  if (url.startsWith("data:") || url.startsWith("blob:")) return url;
+  if (url.startsWith("data:") || url.startsWith("blob:") || url.length == 0) return url;
   const opt = resize ? `rs:fit:${resize}:${resize}/dpr:${window.devicePixelRatio}` : "";
   const urlBytes = te.encode(url);
   const urlEncoded = urlSafe(base64.encode(urlBytes));