From a7e8f948a615b1175a17532ab5e51267281db5d3 Mon Sep 17 00:00:00 2001
From: Austin Mroz <austin@comfy.org>
Date: Sat, 1 Nov 2025 16:39:18 -0700
Subject: [PATCH] Remove Object URL usage for image previews

---
 .../sidebar/tabs/queue/TaskItem.vue           |  8 +++++---
 src/scripts/app.ts                            | 20 +++++++++----------
 src/stores/imagePreviewStore.ts               |  4 ----
 3 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/components/sidebar/tabs/queue/TaskItem.vue b/src/components/sidebar/tabs/queue/TaskItem.vue
index a67c7eb7f4..fa81249aea 100644
--- a/src/components/sidebar/tabs/queue/TaskItem.vue
+++ b/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)
   }
 }
 
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index 6fa25d051a..691312969e 100644
--- a/src/scripts/app.ts
+++ b/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()
diff --git a/src/stores/imagePreviewStore.ts b/src/stores/imagePreviewStore.ts
index 300c532c97..961f9c5281 100644
--- a/src/stores/imagePreviewStore.ts
+++ b/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]
   }