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

**URL:** <https://discourse.nodered.org/t/template-img-element-displays-local-image-based-on-msg-filename-msg-payload/95553>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [21 February 2025 10:36 UTC](https://discourse.nodered.org/t/template-img-element-displays-local-image-based-on-msg-filename-msg-payload/95553 "2025-02-21T10:36:46Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ten21](https://avatars.discourse-cdn.com/v4/letter/t/b77776/32.png) [@Ten21](https://discourse.nodered.org/u/Ten21)\
**Post date:** [21 February 2025 10:36 UTC](https://discourse.nodered.org/t/template-img-element-displays-local-image-based-on-msg-filename-msg-payload/95553/1 "2025-02-21T10:36:46Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/5/954a1ec8e374e600d3062cb949dba8653c6d743b.png)

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](data:image/png;base64,{{{payload}}}).

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [21 February 2025 12:30 UTC](https://discourse.nodered.org/t/template-img-element-displays-local-image-based-on-msg-filename-msg-payload/95553/2 "2025-02-21T12:30:08Z")

</div>

> [@Ten21](#):
>
> output: utf8 string

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](https://nodered.org/docs/user-guide/runtime/configuration) 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](https://nodered.org/docs/user-guide/editor/workspace/import-export)

---

<div class="post-metadata">

**Author:** ![Ten21](https://avatars.discourse-cdn.com/v4/letter/t/b77776/32.png) [@Ten21](https://discourse.nodered.org/u/Ten21)\
**Post date:** [21 February 2025 13:40 UTC](https://discourse.nodered.org/t/template-img-element-displays-local-image-based-on-msg-filename-msg-payload/95553/3 "2025-02-21T13:40:57Z")

</div>

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

```auto
[
    {
        "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"
        }
    }
]

```

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [21 February 2025 13:44 UTC](https://discourse.nodered.org/t/template-img-element-displays-local-image-based-on-msg-filename-msg-payload/95553/4 "2025-02-21T13:44:43Z")

</div>

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 `````)

````auto
``` 
   code goes here 
```

````

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

See this post for more details - [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506)

---

<div class="post-metadata">

**Author:** ![Ten21](https://avatars.discourse-cdn.com/v4/letter/t/b77776/32.png) [@Ten21](https://discourse.nodered.org/u/Ten21)\
**Post date:** [21 February 2025 14:02 UTC](https://discourse.nodered.org/t/template-img-element-displays-local-image-based-on-msg-filename-msg-payload/95553/5 "2025-02-21T14:02:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [21 February 2025 14:06 UTC](https://discourse.nodered.org/t/template-img-element-displays-local-image-based-on-msg-filename-msg-payload/95553/6 "2025-02-21T14:06:35Z")

</div>

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

```auto
[{"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"}}]

```

---

<div class="post-metadata">

**Author:** ![Ten21](https://avatars.discourse-cdn.com/v4/letter/t/b77776/32.png) [@Ten21](https://discourse.nodered.org/u/Ten21)\
**Post date:** [21 February 2025 15:48 UTC](https://discourse.nodered.org/t/template-img-element-displays-local-image-based-on-msg-filename-msg-payload/95553/7 "2025-02-21T15:48:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [21 February 2025 15:52 UTC](https://discourse.nodered.org/t/template-img-element-displays-local-image-based-on-msg-filename-msg-payload/95553/8 "2025-02-21T15:52:01Z")

</div>

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

```auto
[{"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"}}]

```

---

<div class="post-metadata">

**Author:** ![Ten21](https://avatars.discourse-cdn.com/v4/letter/t/b77776/32.png) [@Ten21](https://discourse.nodered.org/u/Ten21)\
**Post date:** [23 February 2025 10:14 UTC](https://discourse.nodered.org/t/template-img-element-displays-local-image-based-on-msg-filename-msg-payload/95553/9 "2025-02-23T10:14:55Z")

</div>

Ah sweet! Thanks for all the great tips @E1cid! They really did ease my node-red starting journey!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [9 March 2025 10:15 UTC](https://discourse.nodered.org/t/template-img-element-displays-local-image-based-on-msg-filename-msg-payload/95553/10 "2025-03-09T10:15:28Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.