54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import useImgProxy from "@/Hooks/useImgProxy";
|
|
import React, { useState } from "react";
|
|
import { FormattedMessage } from "react-intl";
|
|
import { getUrlHostname } from "@/SnortUtils";
|
|
|
|
interface ProxyImgProps extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
|
|
size?: number;
|
|
className?: string;
|
|
}
|
|
|
|
export const ProxyImg = (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} />;
|
|
}
|
|
return (
|
|
<div
|
|
className="note-invoice error"
|
|
onClick={e => {
|
|
e.stopPropagation();
|
|
setBypass(true);
|
|
}}>
|
|
<FormattedMessage
|
|
defaultMessage="Failed to proxy image from {host}, click here to load directly"
|
|
id="65BmHb"
|
|
values={{
|
|
host: getUrlHostname(props.src),
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<img
|
|
{...props}
|
|
src={props.src ? proxy(props.src, props.size) : ""}
|
|
width={props.size}
|
|
height={props.size}
|
|
className={props.className}
|
|
onError={e => {
|
|
if (props.onError) {
|
|
props.onError(e);
|
|
} else {
|
|
setLoadFailed(true);
|
|
}
|
|
}}
|
|
/>
|
|
);
|
|
};
|