Node-RED: Bilder direkt im Flow anzeigen – ohne Dashboard

Du möchtest ein Bild direkt im Node-RED-Flow anzeigen, ohne dafür ein Dashboard einzurichten? Mit der Node node-red-contrib-image-output lassen sich JPEG- und PNG-Bilder direkt im Editor darstellen – beispielsweise Kamerabilder, Schaltpläne oder Grundrisse.

In diesem Beitrag zeige ich dir drei Wege: eine lokale Bilddatei einlesen, ein Bild per HTTP herunterladen und eine Base64-Zeichenkette im Flow hinterlegen. Als Beispiel verwende ich einen einfachen Wohnungsgrundriss. Für die lokale Datei zeige ich außerdem, wie ich den Bilderordner in meinen Docker-Container einbinde und den Dateipfad prüfe.

Die Bildanzeige passt auch zu meinem Projekt „Bilderkennung mit der Shelly Camera: Objekte mit YOLO erkennen“. Dort lässt sich das von YOLO markierte Ergebnisbild direkt im Flow betrachten, während Node-RED die erkannten Objekte weiterverarbeitet.

Variante	Wann ist sie sinnvoll?	Aufbau im Flow
Lokale Datei	Das Bild liegt auf dem Node-RED-System oder in einem eingebundenen Docker-Ordner.	Inject → File in → image
HTTP-Aufruf	Das Bild ist über eine URL erreichbar, beispielsweise auf einem Webserver.	Inject → HTTP request → image
Base64	Eine kleine, feste Grafik soll direkt im Flow gespeichert und mitexportiert werden.	Inject → Function → image

Die Tabelle zeigt den grundlegenden Aufbau. In meinen Beispielen ergänze ich den Aufbau um eine Datei- beziehungsweise HTTP-Statusprüfung.

Welche Bilder lassen sich im Flow anzeigen?

Die Anzeige ist nicht auf Kamerabilder beschränkt. Nach demselben Prinzip kannst du auch einen Schaltplan, einen Grundriss oder eine Anlagenübersicht einbinden.

Für die folgenden Schritte verwende ich eine PNG-Datei namens grundriss.png. Sobald das Laden funktioniert, kannst du den Dateipfad durch den Pfad zu deinem gespeicherten YOLO-Ergebnisbild ersetzen. Dadurch lässt sich die Bildanzeige später auch in den bestehenden Ablauf zur Objekterkennung integrieren.

Node-RED Flow zum automatischen erkennen von Objekten mit YOLO

Die image-Node installieren und konfigurieren

Öffne in Node-RED Menü → Palette verwalten → Installieren und suche nach node-red-contrib-image-output. Nach der Installation steht dir die Node image zur Verfügung.

Installieren von node-red-contrib-image-output

Für mein Beispiel verwende ich folgende Einstellungen:

Einstellung	Wert
Property / Bildquelle	`msg.payload`
Width / Anzeigebreite	`350` Pixel

Die image-Node erhält den Bildinhalt von der File-in-Node. Nach dem Deploy löst du die Inject-Node „Start“ aus. Anschließend erscheint der Grundriss direkt unter der image-Node.

Praxisbeispiel: Einen Grundriss im Flow anzeigen

Neben Kamerabildern lassen sich auch Grundrisse direkt im Flow darstellen. Für mein Beispiel verwende ich eine einfache Schwarz-Weiß-Zeichnung einer fiktiven Wohnung mit zwei Fenstern und einer Terrassentür.

Der Grundriss wird genauso geladen wie jedes andere Bild: Die File-in-Node liest die PNG-Datei als Buffer ein, anschließend zeigt die image-Node sie im Editor an.

Flow zum laden eines Bildes in Node-RED.json Herunterladen

Das kann beispielsweise bei einem Smart-Home-Flow helfen, Fenster- und Türkontakte räumlich zuzuordnen. Passend benannte Nodes neben dem Bild zeigen, zu welchem Raum ein Kontakt gehört. Ihre Zustände könnten später über MQTT empfangen werden.

Das Bild ablegen und für die Anzeige laden

Die image-Node kann JPEG- und PNG-Bilder anzeigen. Ein lokaler Dateipfad wie /mnt/bilder/grundriss.png reicht als Eingabe jedoch nicht aus: Die Node benötigt den Bildinhalt, beispielsweise als Buffer. Deshalb lese ich die Datei zunächst mit einer File-in-Node ein.

Wo muss die Bilddatei liegen?

Das Bild muss auf dem System verfügbar sein, auf dem Node-RED läuft. Ein Bild auf deinem eigenen Rechner ist für eine entfernte Node-RED-Installation nicht automatisch erreichbar.

Da ich Node-RED unter Docker auf meinem Mac verwende, lege ich den Grundriss in einem Ordner ab, den ich in den Container einbinde:

Ablage auf dem Mac	Pfad im Container
`/Users/stefan.draeger/mnt/nodered-bilder/grundriss.png`	`/mnt/bilder/grundriss.png`

Die passende Einbindung in meiner Compose-Datei lautet:

volumes:
  - node-red-data:/data
  - /Users/stefan.draeger/mnt/nodered-bilder:/mnt/bilder:ro

Diese Zeilen gehören zum Node-RED-Service. Bestehende Einbindungen bleiben erhalten. Den Benutzerpfad musst du an deine Umgebung anpassen.

Nach dem Ergänzen der Einbindung muss der Container über Docker Compose neu erstellt werden. Anschließend kann Node-RED die Datei unter /mnt/bilder/grundriss.png lesen. Der Zusatz :ro erlaubt dabei ausschließlich lesenden Zugriff.

Prüfen, ob die Bilddatei existiert

Bevor mein Flow die Bilddatei lädt, prüfe ich mit einer Function-Node, ob der angegebene Pfad auf eine Datei verweist. Das Ergebnis erscheint als Status unter der Node und wird für die weitere Verarbeitung in msg.gefunden gespeichert.

Das Modul fs einbinden

Für den Zugriff auf das Dateisystem verwende ich das Node.js-Modul fs. Öffne die Function-Node und ergänze im Reiter Setup unter Module diesen Eintrag:

Falls das Hinzufügen von Modulen deaktiviert ist, muss in der settings.js diese Einstellung aktiviert werden:

functionExternalModules: true,

Nach einer Änderung der settings.js muss Node-RED neu gestartet werden.

Die Datei prüfen

Die Inject-Node übergibt den vollständigen Dateipfad als String in msg.payload, beispielsweise: /mnt/bilder/grundriss.png

In der Function-Node verwende ich folgenden Code:

const datei = msg.payload;

msg.gefunden = false;
delete msg.errormessage;

try {
    msg.gefunden = fs.statSync(datei).isFile();

    if (!msg.gefunden) {
        msg.errormessage = "Keine reguläre Datei: " + datei;
    }

    node.status({
        fill: msg.gefunden ? "green" : "red",
        shape: "dot",
        text: msg.gefunden
            ? "Datei gefunden"
            : "Keine reguläre Datei"
    });
} catch (err) {
    msg.errormessage = err.code === "ENOENT"
        ? "Datei nicht gefunden: " + datei
        : "Fehler bei " + datei + ": " + err.message;

    node.status({
        fill: "red",
        shape: "ring",
        text: err.code === "ENOENT"
            ? "Datei nicht gefunden"
            : "Fehler: " + err.code
    });
}

return msg;

fs.statSync() fragt Informationen zum angegebenen Pfad ab. Mit isFile() prüfe ich zusätzlich, ob es sich um eine Datei handelt. Ein vorhandener Ordner genügt also nicht.

Eine nachgeschaltete Switch-Node wertet msg.gefunden aus:

Switch-Node für das auswerten ob die Datei gefunden wurde

Ausgang	Bedingung	Weiterleitung
1	ist falsch	Debug-Node
2	ist wahr	File-in-Node

Die Debug-Node zeigt dafür die Eigenschaft msg.errormessage an. Der Dateipfad bleibt in msg.payload erhalten, damit die File-in-Node ihn anschließend verwenden kann.

Diese Prüfung bestätigt die Existenz einer Datei. Ob sie lesbar ist und gültige Bilddaten enthält, prüfen erst die folgenden Schritte.

Alternative: fs über den globalen Kontext bereitstellen

Statt das Modul im Setup-Reiter einzubinden, kannst du es in der settings.js über functionGlobalContext bereitstellen:

functionGlobalContext: {
    // os: require("os"),
    fs: require("fs")
},

Ergänze fs im vorhandenen Konfigurationsblock und behalte bereits vorhandene Einträge bei. Nach dem Neustart von Node-RED greifst du in der Function-Node so darauf zu:

const fs = global.get("fs");

Diese Zeile kommt vor den Code zur Dateiprüfung. Bei dieser Variante entfällt der Moduleintrag im Setup-Reiter.

Vom Dateipfad zum Bildinhalt

In meinem Flow übergibt die Inject-Node den Dateipfad als String in msg.payload. Nach der Dateiprüfung liest die File-in-Node das Bild mit diesen Einstellungen:

Einstellung der read-file-node zum laden eines Bildes als Buffer

Einstellung	Wert
Dateiname	`msg.payload`
Ausgabe	Ein einzelner Buffer

Dabei verändert sich der Inhalt von msg.payload: Vor der File-in-Node enthält er den Dateipfad, danach die Binärdaten des Bildes.

Diese Binärdaten kann die image-Node direkt anzeigen. Eine Umwandlung in Base64 ist für diesen Aufbau nicht erforderlich.

Ein Bild per URL laden und im Flow anzeigen

Das Bild muss nicht auf dem Node-RED-System liegen. Du kannst es auch von einem Webserver herunterladen und anschließend direkt im Flow anzeigen.

Meinen Beispielgrundriss findest du unter dieser URL: https://draeger-it.blog/wp-content/uploads/2026/10/grundriss.png

Für diese Variante benötigst du vier Nodes:

Flow zum laden eines Bildes via HTTP Request

Flow zum laden und anzeigen eines Bildes via HTTP Request.json Herunterladen

HTTP-request-Node einstellen

Die Inject-Node löst den Download aus. In der HTTP-request-Node verwendest du folgende Einstellungen:

Einstellung	Wert
Methode	`GET`
URL	`https://draeger-it.blog/wp-content/uploads/2026/10/grundriss.png`
Rückgabe	Ein binärer Buffer

Die HTTP-request-Node lädt das Bild herunter und legt dessen Binärdaten in msg.payload ab. Die image-Node erhält damit dasselbe Datenformat wie beim Einlesen einer lokalen Datei.

Ihre Einstellungen bleiben unverändert: Als Bildquelle verwende ich msg.payload, als Anzeigebreite 350 Pixel.

Nach dem Deploy klickst du auf die Inject-Node. Der Grundriss wird vom Webserver geladen und direkt im Flow angezeigt. Eine File-in-Node und ein eingebundener Bilderordner sind für diese Variante nicht erforderlich.

Die Bildadresse muss von der Node-RED-Installation aus erreichbar sein und direkt das Bild liefern. Ein Link zu einer Webseite, auf der das Bild eingebettet ist, reicht dafür nicht aus.

Einstellung der HTTP Request Node für das laden des Bildes in einen Buffer

Den HTTP-Statuscode prüfen

Zwischen der HTTP-request-Node und der image-Node prüfe ich mit einer Function-Node, ob der Download erfolgreich war.

Die HTTP-request-Node liefert den Statuscode in msg.statusCode. Für mein Beispiel erwarte ich 200, also eine erfolgreiche HTTP-Antwort.

HTTP Response mit statusCode beim Abruf eines Bildes in Node-RED

In der Function-Node verwende ich diesen Code:

if (msg.statusCode !== 200) {
    const fehlermeldung =
        "Bild konnte nicht geladen werden. HTTP-Status: " +
        (msg.statusCode ?? "unbekannt");

    node.status({
        fill: "red",
        shape: "ring",
        text: fehlermeldung
    });

    node.error(fehlermeldung, msg);
    return null;
}

node.status({
    fill: "green",
    shape: "dot",
    text: "Bild erfolgreich geladen"
});

return msg;

Bei Statuscode 200 zeigt die Function-Node einen grünen Statuspunkt und leitet die Nachricht unverändert an die image-Node weiter.

Bei einem anderen Statuscode, beispielsweise 404 für eine nicht gefundene Datei, erscheint eine Fehlermeldung im Debug-Bereich. return null stoppt die Weiterleitung, sodass die Fehlerantwort nicht als Bild angezeigt wird.

Die Prüfung kontrolliert den HTTP-Status. Ob die Antwort tatsächlich gültige Bilddaten enthält, lässt sich daraus allein nicht erkennen.

Ein Bild als Base64-Zeichenkette anzeigen

Du kannst das Bild auch direkt im Flow hinterlegen. Dazu wandelst du die JPEG- oder PNG-Datei zunächst außerhalb von Node-RED in eine Base64-Zeichenkette um. Diese enthält den Bildinhalt als Text.

Für diese Variante benötigst du drei Nodes:

Flow – Bild als Base64 encoded darstellen.json Herunterladen

Das Bild in Base64 umwandeln

Auf meinem Mac kann ich die Datei im Terminal umwandeln und das Ergebnis direkt in die Zwischenablage kopieren:

base64 -i /Users/stefan.draeger/mnt/nodered-bilder/grundriss.png | tr -d '\n' | pbcopy

Den Dateipfad musst du an deine Ablage anpassen. Anschließend lässt sich die Zeichenkette in die Function-Node einfügen.

Die Zeichenkette im Flow bereitstellen

In der Function-Node verwende ich folgenden Code:

const bildBase64 = "HIER_DIE_BASE64_ZEICHENKETTE_EINFÜGEN";

msg.payload = bildBase64;

return msg;

Ersetze den Platzhalter vollständig durch die kopierte Zeichenkette. Sie muss innerhalb der Anführungszeichen stehen.

Die image-Node erhält die Base64-Zeichenkette über msg.payload. Ihre Einstellungen bleiben unverändert: Bildquelle msg.payload und beispielsweise 350 Pixel Anzeigebreite.

Nach dem Deploy löst du die Inject-Node aus. Das Bild wird direkt aus der im Flow gespeicherten Zeichenkette angezeigt. Die ursprüngliche Bilddatei und ein Webserver werden dafür zur Laufzeit nicht benötigt.

Wann ist Base64 sinnvoll?

Für kleine, feste Grafiken ist diese Variante praktisch: Beim Export des Flows wird der Bildinhalt gleich mitgenommen.

Bei größeren Bildern wächst allerdings auch die Flow-Datei deutlich. Base64 benötigt ungefähr ein Drittel mehr Platz als die ursprünglichen Binärdaten. Außerdem muss bei einem Bildwechsel die Zeichenkette ersetzt und der Flow erneut deployed werden. Für große oder regelmäßig wechselnde Bilder verwende ich deshalb eher eine Datei oder einen HTTP-Aufruf.

Fazit und Ausblick

Mit node-red-contrib-image-output lassen sich Kamerabilder, Schaltpläne oder Grundrisse direkt im Node-RED-Editor anzeigen – ohne ein Dashboard einzurichten.

Am Beispiel meines Grundrisses habe ich drei Varianten gezeigt: das Einlesen einer lokalen Datei, den Download per HTTP und das Hinterlegen einer Base64-Zeichenkette. Dateien und URLs eignen sich für Bilder, die ausgetauscht oder regelmäßig aktualisiert werden. Base64 ist praktisch für kleine, feste Grafiken, die beim Export des Flows mitgenommen werden sollen.

Bei meiner Docker-Installation war die korrekte Einbindung des Bilderordners entscheidend. Die zusätzliche Dateiprüfung hilft dabei, fehlende Dateien oder falsche Pfade schnell zu erkennen.

Im nächsten Beitrag möchte ich meine Fenster- und Türsensoren, die bereits in Home Assistant eingebunden sind, über MQTT mit Node-RED verbinden. Ihre Zustände sollen dann neben dem Grundriss sichtbar werden, damit ich direkt im Flow erkennen kann, welches Fenster oder welche Tür offen ist.

Letzte Aktualisierung am: 02. Oktober 2026