Display image in relationship UI (#5857)

* Update index.tsx * Update index.tsx * Update index.tsx * Create rotten-keys-check.md * Update index.tsx * Tweaks. * Update index.tsx * Update index.tsx
keystonejs · Jun 4, 2021 · 881c9ff · 881c9ff · vercel · Jun 4, 2021
1 parent 119c921
commit 881c9ff
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/.changeset/rotten-keys-check.md b/.changeset/rotten-keys-check.md
@@ -0,0 +1,5 @@
+---
+'@keystone-next/fields': patch
+---
+
+Fixed image not displaying when rendered in card format.
diff --git a/packages-next/fields/src/types/image/views/Field.tsx b/packages-next/fields/src/types/image/views/Field.tsx
@@ -385,7 +385,7 @@ export function validateImage({
 // Styled Components
 // ==============================
 
-const ImageWrapper = ({ children }: { children: ReactNode }) => {
+export const ImageWrapper = ({ children }: { children: ReactNode }) => {
   const theme = useTheme();
 
   return (

diff --git a/packages-next/fields/src/types/image/views/index.tsx b/packages-next/fields/src/types/image/views/index.tsx
@@ -8,7 +8,7 @@ import {
   FieldControllerConfig,
 } from '@keystone-next/types';
 import { FieldContainer, FieldLabel } from '@keystone-ui/fields';
-import { validateImage, validateRef } from './Field';
+import { validateImage, validateRef, ImageWrapper } from './Field';
 
 export { Field } from './Field';
 
@@ -35,7 +35,11 @@ export const CardValue: CardValueComponent = ({ item, field }) => {
   return (
     <FieldContainer>
       <FieldLabel>{field.label}</FieldLabel>
-      {data && <img alt={data.filename} src={data.publicUrlTransformed} />}
+      {data && (
+        <ImageWrapper>
+          <img css={{ width: '100%' }} alt={data.filename} src={data.src} />
+        </ImageWrapper>
+      )}
     </FieldContainer>
   );
 };