RemoteContent: fix CORS fallback for images
Fixes urbit/landscape#994
@@ -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>
