publish: use backgroundImage for images

Fixes urbit/landscape#495
2024-12-23 19:05:48 +03:00 · 2021-03-02 16:36:34 -05:00 · 2021-03-02 16:36:34 -05:00 · 896313b4fd
commit 896313b4fd
parent 5a474cf85b
1 changed files with 9 additions and 1 deletions
--- a/pkg/interface/src/views/apps/publish/components/NotePreview.tsx
+++ b/pkg/interface/src/views/apps/publish/components/NotePreview.tsx
@ -68,7 +68,15 @@ export function NotePreview(props: NotePreviewProps) {
              unwrapDisallowed
              allowedTypes={['text', 'root', 'break', 'paragraph', 'image']}
              renderers={{
-                image: props => <Image src={props.src} maxHeight='300px' style={{ objectFit: 'cover' }} />
+                image: props => (
+                  <Box
+                    backgroundImage={`url(${props.src})`}
+                    style={{ backgroundSize: 'cover',
+                      backgroundPosition: "center" }}
+                  >
+                    <Image src={props.src} opacity="0" maxHeight="300px"/>
+                  </Box>
+                )
              }}
              source={snippet}
            />