diff --git a/packages/app/src/Element/ProxyImg.tsx b/packages/app/src/Element/ProxyImg.tsx index 506b3f1d..b626268c 100644 --- a/packages/app/src/Element/ProxyImg.tsx +++ b/packages/app/src/Element/ProxyImg.tsx @@ -1,5 +1,5 @@ import useImgProxy from "@/Hooks/useImgProxy"; -import React, { HTMLProps, ReactNode, forwardRef, useState } from "react"; +import React, {HTMLProps, ReactNode, forwardRef, useState, useMemo} from "react"; import { FormattedMessage } from "react-intl"; import { getUrlHostname } from "@/SnortUtils"; @@ -16,6 +16,8 @@ export const ProxyImg = forwardRef( const { proxy } = useImgProxy(); const [loadFailed, setLoadFailed] = useState(false); const [bypass, setBypass] = useState(CONFIG.media.bypassImgProxyError); + const proxiedSrc = useMemo(() => proxy(props.src ?? "", size, sha256), [props.src, size, sha256]); + const [src, setSrc] = useState(proxiedSrc); if (loadFailed && !bypass && (promptToLoadDirectly ?? true)) { return ( @@ -35,8 +37,22 @@ export const ProxyImg = forwardRef( ); } - const src = loadFailed && bypass ? props.src : proxy(props.src ?? "", size, sha256); - if (!src || (loadFailed && !bypass)) return missingImageElement; + + const handleImageError = (e) => { + if (props.onError) { + props.onError(e); + } else { + console.error("Failed to load image: ", props.src, e); + if (bypass && src === proxiedSrc) { + setSrc(props.src ?? ""); + } else { + setLoadFailed(true); + } + } + }; + + if (!src || loadFailed) return missingImageElement ??
Image not available
; + return ( ( width={size} height={size} className={className} - onError={e => { - if (props.onError) { - props.onError(e); - } else { - console.error("Failed to proxy image: ", props.src, e); - setLoadFailed(true); - } - }} + onError={handleImageError} /> ); },