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);
         }
       }}