trycatchkamal/snort
1
0
Fork 0
forked from Kieran/snort
Code Pull Requests Activity

broken img placeholder fix

Browse Source
This commit is contained in:
Martti Malmi 2024-01-02 00:54:10 +02:00
parent 3d98532e40
commit 19eeb890ac
1 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/app/src/Element/ProxyImg.tsx
View File

@ -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<HTMLImageElement, ProxyImgProps>(
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<HTMLImageElement, ProxyImgProps>(
</div>
);
}
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 ?? <div>Image not available</div>;
return (
<img
{...props}
@ -45,14 +61,7 @@ export const ProxyImg = forwardRef<HTMLImageElement, ProxyImgProps>(
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}
/>
);
},