Template img element displays local image based on msg.filename / msg.payload

Dashboard
1

Hi, everyone, I have just started my journey in Node-red! I'm using dashboard 2.0 and hosting on Windows.

As per mentioned in the topic, I would like to display local image based on msg.filename or msg.payload

I have tried multiple attempts based on the forums that I could found but so far nothing works for me or I must have missed some parameters. My flow is below here:

Screenshot 2025-02-21 182612
Screenshot 2025-02-21 182612865×231 17.5 KB

In my function node:
msg.filename = '/drone alpha logo/drone waiting.png';
return msg;

In my file in node:
Filename: path msg.filename
output: utf8 string
encoding: base64

In my base-64 node:
Action: Convert Buffer -> Base64
Property: msg.payload

inside my template node is
Image not found.

2

A png would be a binary output or default.
Use debug nodes to confirm the file read output.
You should not need to convert it to base64.

If you set up a httpstattic folder you should be able to use the direct path in the template node. There are many topics on this in the forum.

You may want to share the flow for clarity to How to import/export a flow

3

Hi, there! Thanks for the import/export tip! Appreciate it a lot, here's my flow:

[
    {
        "id": "c06c5c9870bc93f1",
        "type": "inject",
        "z": "77aff2eafb24b7bb",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 270,
        "y": 240,
        "wires": [
            [
                "0c9965b2fd9c79bd",
                "774af96cbc737de7",
                "2940ecd36a1f4783"
            ]
        ]
    },
    {
        "id": "2940ecd36a1f4783",
        "type": "function",
        "z": "77aff2eafb24b7bb",
        "name": "function 1",
        "func": "msg.filename  = '/drone alpha logo/drone waiting.png';\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 460,
        "y": 620,
        "wires": [
            [
                "d775cf866f824272"
            ]
        ]
    },
    {
        "id": "d775cf866f824272",
        "type": "file in",
        "z": "77aff2eafb24b7bb",
        "name": "",
        "filename": "msg.filename",
        "filenameType": "str",
        "format": "utf8",
        "chunk": false,
        "sendError": false,
        "encoding": "base64",
        "allProps": false,
        "x": 610,
        "y": 680,
        "wires": [
            [
                "441576020e357e06"
            ]
        ]
    },
    {
        "id": "441576020e357e06",
        "type": "base64",
        "z": "77aff2eafb24b7bb",
        "name": "",
        "action": "",
        "property": "payload",
        "x": 720,
        "y": 640,
        "wires": [
            [
                "f582d1342121aa1e"
            ]
        ]
    },
    {
        "id": "f582d1342121aa1e",
        "type": "ui-template",
        "z": "77aff2eafb24b7bb",
        "group": "9ce65084a442e87d",
        "page": "",
        "ui": "",
        "name": "",
        "order": 6,
        "width": "2",
        "height": "2",
        "head": "",
        "format": "\n<img :src=\"msg.payload\">\n\n<div>{{msg.payload}}</div>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 880,
        "y": 620,
        "wires": [
            []
        ]
    },
    {
        "id": "9ce65084a442e87d",
        "type": "ui-group",
        "name": "SOTON DRONE",
        "page": "d8b352cf6cb63f67",
        "width": "2",
        "height": "2",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "d8b352cf6cb63f67",
        "type": "ui-page",
        "name": "home",
        "ui": "dc8f8552f1b7fac8",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "596c0e8c07f8cab3",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "dc8f8552f1b7fac8",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true
    },
    {
        "id": "596c0e8c07f8cab3",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094CE",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]
4

I should have included how to post code also, as your json is corrupt due to forum formatting.

In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote ```)

``` 
   code goes here 
```

You can edit and correct your post by clicking the pencil :pencil2: icon.

See this post for more details - How to share code or flow json

5

Hey @E1cid, thank you once again for the useful tips, haha, I've edited my flow now.

6

Try this
use msg in file read node, then :src in the template which tells template the the following contains Javascript.
example

[{"id":"c06c5c9870bc93f1","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":340,"y":5860,"wires":[["936e99de95de4a1c"]]},{"id":"936e99de95de4a1c","type":"function","z":"d1395164b4eec73e","name":"function 156","func":"msg.filename  = '/drone alpha logo/drone waiting.png';\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":410,"y":5920,"wires":[["2a588c1bea46fc43"]]},{"id":"2a588c1bea46fc43","type":"file in","z":"d1395164b4eec73e","name":"","filename":"filename","filenameType":"msg","format":"utf8","chunk":false,"sendError":false,"encoding":"base64","allProps":false,"x":580,"y":5920,"wires":[["4727bafc134e7b9d","f582d1342121aa1e"]]},{"id":"4727bafc134e7b9d","type":"debug","z":"d1395164b4eec73e","name":"debug 2578","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":750,"y":5840,"wires":[]},{"id":"f582d1342121aa1e","type":"ui-template","z":"d1395164b4eec73e","group":"9ce65084a442e87d","page":"","ui":"","name":"","order":1,"width":"2","height":"2","head":"","format":"\n<img width=\"100%\" height=\"100%\" alt=\"Image not found\" :src=\"'data:image/png;base64,' + msg.payload\">\n\n<div>{{msg.payload}}</div>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":780,"y":6000,"wires":[[]]},{"id":"9ce65084a442e87d","type":"ui-group","name":"SOTON DRONE","page":"c694d0ebe0d2b702","width":"2","height":"2","order":2,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"c694d0ebe0d2b702","type":"ui-page","name":"Page1","ui":"1805777f90e92057","path":"/page1","icon":"home","layout":"grid","theme":"a965ccfef139317a","breakpoints":[{"name":"Default","px":0,"cols":3},{"name":"Tablet","px":576,"cols":6},{"name":"Small Desktop","px":768,"cols":9},{"name":"Desktop","px":1024,"cols":12}],"order":1,"className":"","visible":true,"disabled":false},{"id":"1805777f90e92057","type":"ui-base","name":"dashboard ","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"5","showDisconnectNotification":false},{"id":"a965ccfef139317a","type":"ui-theme","name":"HN Theme","colors":{"surface":"#5c5c5c","primary":"#00fdff","bgPage":"#383838","groupBg":"#4f4f4f","groupOutline":"#858585"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
7

THANK YOU SO MUCH IT WORKEDDD!! YOU TRULY DID MAKE MY DAY @E1cid !! Wohooo

8

As said previously, if you set up a httpstatic folder you can simply use the path from the httpstatic folder
e.g.

[{"id":"c06c5c9870bc93f1","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":380,"y":6120,"wires":[["2940ecd36a1f4783"]]},{"id":"2940ecd36a1f4783","type":"function","z":"d1395164b4eec73e","name":"function 1","func":"msg.payload  = '/files/test.png';\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":540,"y":6120,"wires":[["f582d1342121aa1e"]]},{"id":"f582d1342121aa1e","type":"ui-template","z":"d1395164b4eec73e","group":"9d83cd8b3d5ee33c","page":"","ui":"","name":"","order":2,"width":"2","height":"2","head":"","format":"\n<img width=\"100%\" height=\"100%\" alt=\"Image not found\" :src=\"msg.payload\">\n\n<div>{{msg.payload}}</div>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":700,"y":6120,"wires":[[]]},{"id":"9d83cd8b3d5ee33c","type":"ui-group","name":"Group1","page":"c694d0ebe0d2b702","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"c694d0ebe0d2b702","type":"ui-page","name":"Page1","ui":"1805777f90e92057","path":"/page1","icon":"home","layout":"grid","theme":"a965ccfef139317a","breakpoints":[{"name":"Default","px":0,"cols":3},{"name":"Tablet","px":576,"cols":6},{"name":"Small Desktop","px":768,"cols":9},{"name":"Desktop","px":1024,"cols":12}],"order":1,"className":"","visible":true,"disabled":false},{"id":"1805777f90e92057","type":"ui-base","name":"dashboard ","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"5","showDisconnectNotification":false},{"id":"a965ccfef139317a","type":"ui-theme","name":"HN Theme","colors":{"surface":"#5c5c5c","primary":"#00fdff","bgPage":"#383838","groupBg":"#4f4f4f","groupOutline":"#858585"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]