diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemPreviewMini.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemPreviewMini.tsx index 9a902b0ab7..ee27ae5f35 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemPreviewMini.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemPreviewMini.tsx @@ -62,7 +62,7 @@ export const QueueItemPreviewMini = memo(({ item, isSelected, number }: Props) = > {imageDTO && } - {!imageLoaded && } + {!imageLoaded && } diff --git a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemProgressImage.tsx b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemProgressImage.tsx index 0cf59fd290..e9f934f92b 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemProgressImage.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/QueueItemProgressImage.tsx @@ -3,14 +3,18 @@ import { Flex, Image } from '@invoke-ai/ui-library'; import { useCanvasSessionContext, useProgressData } from 'features/controlLayers/components/SimpleSession/context'; import { memo } from 'react'; -type Props = { itemId: number } & ImageProps; +type Props = { itemId: number; withBg?: boolean } & ImageProps; -export const QueueItemProgressImage = memo(({ itemId, ...rest }: Props) => { +export const QueueItemProgressImage = memo(({ itemId, withBg, ...rest }: Props) => { const ctx = useCanvasSessionContext(); const { progressImage } = useProgressData(ctx.$progressData, itemId); if (!progressImage) { - return ; + if (withBg) { + return ; + } else { + return null; + } } return ( diff --git a/invokeai/frontend/web/src/features/dnd/DndImage.tsx b/invokeai/frontend/web/src/features/dnd/DndImage.tsx index 9009fe440f..9aed1798b4 100644 --- a/invokeai/frontend/web/src/features/dnd/DndImage.tsx +++ b/invokeai/frontend/web/src/features/dnd/DndImage.tsx @@ -77,7 +77,8 @@ export const DndImage = memo( ref={ref} src={asThumbnail ? imageDTO.thumbnail_url : imageDTO.image_url} fallbackSrc={asThumbnail ? undefined : imageDTO.thumbnail_url} - w={imageDTO.width} + width={imageDTO.width} + height={imageDTO.height} sx={sx} data-is-dragging={isDragging} {...rest}