Remove Object URL usage for image previews

src/components/sidebar/tabs/queue/TaskItem.vue

@@ -177,10 +177,12 @@ const formatTime = (time?: number) => {
 
 const onProgressPreviewReceived = async ({ detail }: CustomEvent) => {
   if (props.task.displayStatus === TaskItemDisplayStatus.Running) {
-    if (progressPreviewBlobUrl.value) {
-      URL.revokeObjectURL(progressPreviewBlobUrl.value)
+    const reader = new FileReader()
+    reader.onloadend = () => {
+      if (typeof reader.result !== 'string') return
+      progressPreviewBlobUrl.value = reader.result
     }
-    progressPreviewBlobUrl.value = URL.createObjectURL(detail)
+    reader.readAsDataURL(detail)
   }
 }
 

src/scripts/app.ts

@@ -719,18 +719,18 @@ export class ComfyApp {
     api.addEventListener('b_preview_with_metadata', ({ detail }) => {
       // Enhanced preview with explicit node context
       const { blob, displayNodeId } = detail
-      const { setNodePreviewsByExecutionId, revokePreviewsByExecutionId } =
-        useNodeOutputStore()
-      // Ensure clean up if `executing` event is missed.
-      revokePreviewsByExecutionId(displayNodeId)
-      const blobUrl = URL.createObjectURL(blob)
-      // Preview cleanup is handled in progress_state event to support multiple concurrent previews
+      const { setNodePreviewsByExecutionId } = useNodeOutputStore()
+      const reader = new FileReader()
       const nodeParents = displayNodeId.split(':')
-      for (let i = 1; i <= nodeParents.length; i++) {
-        setNodePreviewsByExecutionId(nodeParents.slice(0, i).join(':'), [
-          blobUrl
-        ])
+      reader.onloadend = () => {
+        if (typeof reader.result !== 'string') return
+        for (let i = 1; i <= nodeParents.length; i++) {
+          setNodePreviewsByExecutionId(nodeParents.slice(0, i).join(':'), [
+            reader.result
+          ])
+        }
       }
+      reader.readAsDataURL(blob)
     })
 
     api.init()

src/stores/imagePreviewStore.ts

@@ -261,10 +261,6 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     const previews = app.nodePreviewImages[nodeLocatorId]
     if (!previews?.[Symbol.iterator]) return
 
-    for (const url of previews) {
-      URL.revokeObjectURL(url)
-    }
-
     delete app.nodePreviewImages[nodeLocatorId]
     delete nodePreviewImages.value[nodeLocatorId]
   }