RemoteContent: fix CORS fallback for images

Fixes urbit/landscape#994
This commit is contained in:
Liam Fitzgerald 2021-06-28 12:17:34 +10:00
parent 09500b997d
commit 517e4c726c
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB

View File

@ -44,8 +44,13 @@ const Image = styled.img(system({ objectFit: true }), ...allSystemStyle);
export function RemoteContentImageEmbed(
props: ImageProps & RemoteContentEmbedProps
) {
const { url, noCors = false, ...rest } = props;
const { url, ...rest } = props;
const [noCors, setNoCors] = useState(false);
const { hovering, bind } = useHovering();
// maybe images aren't set up for CORS embeds
const onError = useCallback(() => {
setNoCors(true);
}, []);
return (
<Box height="100%" width="100%" position="relative" {...bind} {...rest}>
@ -77,6 +82,7 @@ export function RemoteContentImageEmbed(
width="100%"
objectFit="contain"
borderRadius={2}
onError={onError}
{...props}
/>
</Box>