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