ComfyUI rgthree-comfy Image Comparer 节点无输出问题排查与解决

GitHub 仓库

rgthree/rgthree-comfy：让ComfyUI更舒适！

环境： Windows 11 + ComfyUI + rgthree-comfy 插件
问题节点： Image Comparer（A/B 图像对比节点）
症状： 工作流运行完毕后，Image Comparer 节点无任何图像显示

[ComfyUI rgthree-comfy Image Comparer 节点无输出问题排查与解决](#ComfyUI rgthree-comfy Image Comparer 节点无输出问题排查与解决)

问题描述

排查过程

第一步：确认文件完整性

第二步：确认节点已注册

[第三步：确认前端 JS 存在](#第三步：确认前端 JS 存在)

[第四步：分析 JS 逻辑](#第四步：分析 JS 逻辑)

[第五步：注意到 init.py 中的警告](#第五步：注意到 init.py 中的警告)

第六步：定位根本原因

根本原因

解决方法

[Image Comparer 节点使用说明](#Image Comparer 节点使用说明)

总结

问题描述

更新 rgthree-comfy 插件并重启 ComfyUI 后，Image Comparer（图像对比）节点运行完工作流后没有任何预览输出，节点区域一片空白，无滑动对比效果。

排查过程

第一步：确认文件完整性

检查插件目录结构是否完整：

复制代码

ls H:\PythonProjects3\Win_ComfyUI\custom_nodes\rgthree-comfy\

确认 py/、web/ 目录及 __init__.py 等核心文件均存在，排除文件缺失问题。

第二步：确认节点已注册

查看 __init__.py，确认 RgthreeImageComparer 已在 NODE_CLASS_MAPPINGS 中正确注册，Python 后端无误。

复制代码

ls __init__.py

第三步：确认前端 JS 存在

复制代码

ls H:\PythonProjects3\Win_ComfyUI\custom_nodes\rgthree-comfy\web\comfyui\ | Where-Object {$_.Name -like "*compar*"}

输出确认 image_comparer.js（14736 字节）存在，前端文件完整。

第四步：分析 JS 逻辑

查看 image_comparer.js 前 50 行，确认节点通过 onExecuted 回调接收后端返回的图像数据，并渲染到自定义 canvas widget 上。这种渲染方式依赖 ComfyUI 原生的 canvas 渲染引擎，与 Vue 节点（Nodes 2.0）不兼容。

复制代码

# 看JS文件前50行，确认注册方式
Get-Content H:\PythonProjects3\Win_ComfyUI\custom_nodes\rgthree-comfy\web\comfyui\image_comparer.js | Select-Object -First 50

第五步：注意到 `init.py` 中的警告

复制代码

cat H:\PythonProjects3\Win_ComfyUI\custom_nodes\rgthree-comfy\__init__.py

插件作者在 __init__.py 中明确写有如下警告：

ComfyUI's new Node 2.0 rendering may be incompatible with some rgthree-comfy nodes and features, breaking some rendering as well as losing the ability to access a node's properties...

第六步：定位根本原因

进入 ComfyUI 设置（右上角齿轮图标），发现：

"Nodes 2.0 / 现代节点设计（Vue 节点）"选项处于开启状态。

根本原因

ComfyUI 的 Nodes 2.0（Vue 节点） 使用了全新的渲染引擎，与 rgthree-comfy 基于原生 canvas 实现的自定义节点渲染（Image Comparer 的滑动对比画布、节点属性面板等）存在根本性冲突，导致图像无法显示。

解决方法

操作步骤：

打开 ComfyUI 界面，点击右上角齿轮图标进入设置
搜索 "Node" 或 "Vue" 或 "Nodes 2.0"
找到 "现代节点设计（Vue 节点）" 选项，将其关闭
刷新页面（F5）
重新运行工作流

关闭后，该节点的图片对比功能几乎立即恢复正常。Image Comparer 节点即可正常显示 A/B 图像对比效果（Slide 滑动模式 / Click 点击切换模式）。

Image Comparer 节点使用说明

顺带记录一下这个节点的正确用法：

输入	说明
`image_a`	必填，第一张对比图（接 VAE Decode 的 IMAGE 输出）
`image_b`	可选，第二张对比图；若 `image_a` 是包含两张图的 batch 则可不接

右键节点 → Properties → comparer_mode 可切换对比模式：

Slide：拖动分隔线对比（默认）
Click：点击切换显示 A 或 B

⚠️ 注意：Image Comparer 是纯展示节点，没有图像输出端口，不能向下游传递图像。

总结

检查项	结果
插件文件完整性	✅ 正常
Python 节点注册	✅ 正常
前端 JS 文件	✅ 存在
Nodes 2.0 兼容性	❌ 冲突，关闭即可解决

结论： rgthree-comfy 的自定义渲染节点（Image Comparer 等）与 ComfyUI Nodes 2.0（Vue 节点）不兼容。在 Nodes 2.0 完全支持第三方自定义渲染之前，使用 rgthree-comfy 需保持该选项关闭。

参考：rgthree-comfy GitHub

ComfyUI rgthree-comfy Image Comparer 节点无输出问题排查与解决