Show placeholder image when preview is disabled

When the preview is disabled in the canvas widget, a 1x1 transparent PNG placeholder image is now set to node.imgs. This prevents issues with missing images and ensures consistent UI behavior.

js/CanvasView.js

@@ -538,6 +538,10 @@ async function createCanvasWidget(node, widget, app) {
         const showPreviewWidget = node.widgets.find((w) => w.name === "show_preview");
         if (showPreviewWidget && !showPreviewWidget.value) {
             log.debug("Preview disabled, skipping updateOutput");
+            const PLACEHOLDER_IMAGE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
+            const placeholder = new Image();
+            placeholder.src = PLACEHOLDER_IMAGE;
+            node.imgs = [placeholder];
             return;
         }
         const triggerWidget = node.widgets.find((w) => w.name === "trigger");

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "layerforge"
 description = "Photoshop-like layered canvas editor to your ComfyUI workflow. This node is perfect for complex compositing, inpainting, and outpainting, featuring multi-layer support, masking, blend modes, and precise transformations. Includes optional AI-powered background removal for streamlined image editing."
-version = "1.3.9"
+version = "1.4.0"
 license = { text = "MIT License" }
 dependencies = ["torch", "torchvision", "transformers", "aiohttp", "numpy", "tqdm", "Pillow"]
 

src/CanvasView.ts

@@ -577,6 +577,10 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp):
         const showPreviewWidget = node.widgets.find((w) => w.name === "show_preview");
         if (showPreviewWidget && !showPreviewWidget.value) {
             log.debug("Preview disabled, skipping updateOutput");
+            const PLACEHOLDER_IMAGE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
+            const placeholder = new Image();
+            placeholder.src = PLACEHOLDER_IMAGE;
+            node.imgs = [placeholder];
             return;
         }