diff --git a/invokeai/frontend/web/src/features/nodes/components/fields/ImageInputFieldComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/fields/ImageInputFieldComponent.tsx
index b43338f930..18be021625 100644
--- a/invokeai/frontend/web/src/features/nodes/components/fields/ImageInputFieldComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/fields/ImageInputFieldComponent.tsx
@@ -21,7 +21,7 @@ const ImageInputFieldComponent = (
 
   const getImageByNameAndType = useGetImageByNameAndType();
   const dispatch = useAppDispatch();
-  const [url, setUrl] = useState<string>();
+  const [url, setUrl] = useState<string | undefined>(field.value?.image_url);
   const { getUrl } = useGetUrl();
 
   const handleDrop = useCallback(
@@ -39,16 +39,13 @@ const ImageInputFieldComponent = (
         return;
       }
 
-      setUrl(image.url);
+      setUrl(image.image_url);
 
       dispatch(
         fieldValueChanged({
           nodeId,
           fieldName: field.name,
-          value: {
-            image_name: name,
-            image_type: type,
-          },
+          value: image,
         })
       );
     },
diff --git a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
index 4ce0120c21..3c93be7ac5 100644
--- a/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
+++ b/invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts
@@ -11,7 +11,7 @@ import {
   NodeChange,
   OnConnectStartParams,
 } from 'reactflow';
-import { ImageField } from 'services/api';
+import { ImageDTO } from 'services/api';
 import { receivedOpenAPISchema } from 'services/thunks/schema';
 import { InvocationTemplate, InvocationValue } from '../types/types';
 import { parseSchema } from '../util/parseSchema';
@@ -65,13 +65,7 @@ const nodesSlice = createSlice({
       action: PayloadAction<{
         nodeId: string;
         fieldName: string;
-        value:
-          | string
-          | number
-          | boolean
-          | Pick<ImageField, 'image_name' | 'image_type'>
-          | RgbaColor
-          | undefined;
+        value: string | number | boolean | ImageDTO | RgbaColor | undefined;
       }>
     ) => {
       const { nodeId, fieldName, value } = action.payload;
diff --git a/invokeai/frontend/web/src/features/nodes/types/types.ts b/invokeai/frontend/web/src/features/nodes/types/types.ts
index 876ba95cac..d2c7c7e704 100644
--- a/invokeai/frontend/web/src/features/nodes/types/types.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/types.ts
@@ -1,6 +1,6 @@
 import { OpenAPIV3 } from 'openapi-types';
 import { RgbaColor } from 'react-colorful';
-import { ImageField } from 'services/api';
+import { ImageDTO } from 'services/api';
 import { AnyInvocationType } from 'services/events/types';
 
 export type InvocationValue = {
@@ -179,7 +179,7 @@ export type ConditioningInputFieldValue = FieldValueBase & {
 
 export type ImageInputFieldValue = FieldValueBase & {
   type: 'image';
-  value?: Pick<ImageField, 'image_name' | 'image_type'>;
+  value?: ImageDTO;
 };
 
 export type ModelInputFieldValue = FieldValueBase & {
@@ -245,7 +245,7 @@ export type BooleanInputFieldTemplate = InputFieldTemplateBase & {
 };
 
 export type ImageInputFieldTemplate = InputFieldTemplateBase & {
-  default: Pick<ImageField, 'image_name' | 'image_type'>;
+  default: ImageDTO;
   type: 'image';
 };