# Show Image as icon on dashboard

**URL:** <https://discourse.nodered.org/t/show-image-as-icon-on-dashboard/806>\
**Category:** Dashboard\
**Created:** [14 June 2018 10:05 UTC](https://discourse.nodered.org/t/show-image-as-icon-on-dashboard/806 "2018-06-14T10:05:26Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![bk1989](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bk1989/32/2826_2.png) [@bk1989](https://discourse.nodered.org/u/bk1989)\
**Post date:** [14 June 2018 10:05 UTC](https://discourse.nodered.org/t/show-image-as-icon-on-dashboard/806/1 "2018-06-14T10:05:26Z")

</div>

So I’m currently working on a flow using the opc ua and the dashboard nodes to send information form my windows pc to an opc server. Therefore I created an dashboard and use buttons to send int32 to my server. The next step would be to use an image as icon for the buttons. I already found this topic ([Getting image in dashboard](https://discourse.nodered.org/t/getting-image-in-dashboard/228/16)) where an image was used as background image. But I still don’t managed to use an image as icon. Has somebody already managed to use image from an pc for icons?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [14 June 2018 16:03 UTC](https://discourse.nodered.org/t/show-image-as-icon-on-dashboard/806/2 "2018-06-14T16:03:17Z")

</div>

You can easily use any of the several hundred built in material icons or fa-icons (v4.7)

More than that gets a lot more complex. I’ve not done it, but I would guess you may be able to host them on a public directory then use some css magic to attach them to the button.

---

<div class="post-metadata">

**Author:** ![bk1989](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bk1989/32/2826_2.png) [@bk1989](https://discourse.nodered.org/u/bk1989)\
**Post date:** [15 June 2018 10:16 UTC](https://discourse.nodered.org/t/show-image-as-icon-on-dashboard/806/3 "2018-06-15T10:16:55Z")

</div>

Thanks for the information. is there a possible way to show the image on the dashboard? Not as an icon, but as picture next to a button?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [15 June 2018 10:27 UTC](https://discourse.nodered.org/t/show-image-as-icon-on-dashboard/806/4 "2018-06-15T10:27:16Z")

</div>

yes - in a ui\_template sized and placed next to a button

---

<div class="post-metadata">

**Author:** ![bk1989](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bk1989/32/2826_2.png) [@bk1989](https://discourse.nodered.org/u/bk1989)\
**Post date:** [18 June 2018 07:18 UTC](https://discourse.nodered.org/t/show-image-as-icon-on-dashboard/806/5 "2018-06-18T07:18:58Z")

</div>

So I tried to change the settings.json file in "C:\Users\user.node-red" for the httpStatic. Therefor I used:

> ```
> // When httpAdminRoot is used to move the UI to a different root path, the
> // following property can be used to identify a directory of static content
> // that should be served at http://localhost:1880/.
> httpStatic: 'C:\Users\user\Pictures',
> 
> ```

Bu when I want to show an image via [http://localhost:1880/my-image.png](http://localhost:1880/my-image.png) I just get the error "Cannot GET /my-image.png"

---

<div class="post-metadata">

**Author:** ![bk1989](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bk1989/32/2826_2.png) [@bk1989](https://discourse.nodered.org/u/bk1989)\
**Post date:** [18 June 2018 07:35 UTC](https://discourse.nodered.org/t/show-image-as-icon-on-dashboard/806/6 "2018-06-18T07:35:54Z")

</div>

Found the mistake. Using Windows you have to set the link like

`httpStatic: 'C:\\Users\\kauzinge\\Pictures',`

---

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [18 June 2018 07:56 UTC](https://discourse.nodered.org/t/show-image-as-icon-on-dashboard/806/7 "2018-06-18T07:56:18Z")

</div>

Good Morning

Maybe helps you as starting point…

I have this on a template which shows an image on the dashboard and if you click on it will open on a full new window.

````auto
<div height="210" style="height: 210px;">
<img src="/grab.jpg" width="280"><br/>
<a href="/grab.jpg" target="_blank">Full screen</a>
</div>

```

What makes the 2 first lines on the code are the related to the image show on the dashboard, just defining the proper size and the link of your image should work as u expect.

Should be also some way that you click on the image and send some payload or do some action but don't ask me how...

Regards
````

---

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [18 June 2018 07:56 UTC](https://discourse.nodered.org/t/show-image-as-icon-on-dashboard/806/8 "2018-06-18T07:56:32Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/52a899a00d60e1dfacdcbe21886b2a1aefae3ac9.jpg)

---

<div class="post-metadata">

**Author:** ![bk1989](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bk1989/32/2826_2.png) [@bk1989](https://discourse.nodered.org/u/bk1989)\
**Post date:** [18 June 2018 08:08 UTC](https://discourse.nodered.org/t/show-image-as-icon-on-dashboard/806/9 "2018-06-18T08:08:46Z")

</div>

Hey, thank you for that tip for CSS

---

<div class="post-metadata">

**Author:** ![bk1989](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bk1989/32/2826_2.png) [@bk1989](https://discourse.nodered.org/u/bk1989)\
**Post date:** [20 June 2018 08:51 UTC](https://discourse.nodered.org/t/show-image-as-icon-on-dashboard/806/10 "2018-06-20T08:51:04Z")

</div>

So, now I've got the images on the dashboard using a template node and the command:

> ```
> <div height="150" style="height: 150px;" ng-click="send({payload:'Clicked'});">
> <img src="/Block_Gray.png" width="140"><br/>
> </div>
> 
> ```

So I get the following picture of the dashboard as result:

 ![Dashboard](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/a2e636b12b887886bea281c7208bf39ae70e4758.jpg)

Now I would like to place the images in two rows. But even if I increase the size of the group to 20 it's still not enough to place two images right next to each other

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [20 June 2018 08:53 UTC](https://discourse.nodered.org/t/show-image-as-icon-on-dashboard/806/11 "2018-06-20T08:53:13Z")

</div>

By default, a `<div>` element displays as a block - it fills the horizontal space available to it.

If you want to put lots of `<div>`s in a row, you can set its `display` css property to `inline-block` and also set its `width`:

```auto
<div style="display: inline-block; width: 150px; height: 150px;" ng-click="send({payload:'Clicked'});">
<img src="/Block_Gray.png" width="140"><br/>
</div>

```

---

<div class="post-metadata">

**Author:** ![RapinIot1](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rapiniot1/32/7086_2.png) [@RapinIot1](https://discourse.nodered.org/u/RapinIot1)\
**Post date:** [26 March 2019 07:58 UTC](https://discourse.nodered.org/t/show-image-as-icon-on-dashboard/806/12 "2019-03-26T07:58:02Z")

</div>

# bk1989 do you have full code for picture on ui

---

<div class="post-metadata">

**Author:** ![bk1989](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bk1989/32/2826_2.png) [@bk1989](https://discourse.nodered.org/u/bk1989)\
**Post date:** [26 March 2019 09:08 UTC](https://discourse.nodered.org/t/show-image-as-icon-on-dashboard/806/13 "2019-03-26T09:08:09Z")

</div>

@ [RapinIot1](https://discourse.nodered.org/u/RapinIot1) Here's the code I'm currently using to display an image on the dashboard. You will also have to change the path in the config.

```auto
[
    {
        "id": "92c67e1a.214f8",
        "type": "tab",
        "label": "Flow 1"
    },
    {
        "id": "49d71999.9bbfe",
        "type": "ui_template",
        "z": "92c67e1a.214f8",
        "group": "89c38c32.842bf",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<div>\n<div align=\"center\" style=\"display: inline-block; width: 140px; height: 140px;\" ng-click=\"send({payload:'Clicked1'});\">\n<img src=\"/M04.png\" width=\"130\"><br/>\n</div>\n\n<div align=\"center\" style=\"display: inline-block; width: 140px; height: 140px;\" ng-click=\"send({payload:'Clicked2'});\">\n<img src=\"/L01.jpg\" width=\"130\"><br/>\n</div>\n\n<div align=\"center\" style=\"display: inline-block; width: 140px; height: 140px;\" ng-click=\"send({payload:'Clicked3'});\">\n<img src=\"/S04.png\" width=\"130\"><br/>\n</div>\n\n<div align=\"center\" style=\"display: inline-block; width: 140px; height: 140px;\" ng-click=\"send({payload:'Clicked4'});\">\n<img src=\"/S05.png\" width=\"130\"><br/>\n</div>\n\n<div align=\"center\" style=\"display: inline-block; width: 140px; height: 140px;\" ng-click=\"send({payload:'Clicked5'});\">\n<img src=\"/L03.png\" width=\"130\"><br/>\n</div>\n</div>",
        "storeOutMessages": false,
        "fwdInMessages": true,
        "x": 290,
        "y": 131,
        "wires": [
            [
                "ac4101c0.ba8af8"
            ]
        ]
    },
    {
        "id": "ac4101c0.ba8af8",
        "type": "function",
        "z": "92c67e1a.214f8",
        "name": "",
        "func": "if (msg.payload==='Clicked1')\n{\n msg.payload = '1';\n return msg;\n}\nelse\nif (msg.payload==='Clicked2')\n{\n msg.payload = '2' ;\n return msg;\n}\nelse\nif (msg.payload==='Clicked3')\n{\n msg.payload = '3' ;\n return msg;\n}\nelse\nif (msg.payload==='Clicked4')\n{\n msg.payload = '4' ;\n return msg;\n}\nelse\nif (msg.payload==='Clicked5')\n{\n msg.payload = '5' ;\n return msg;\n}",
        "outputs": 1,
        "noerr": 0,
        "x": 413,
        "y": 130,
        "wires": [
            [
                "10b347e8.32d6e8"
            ]
        ]
    },
    {
        "id": "10b347e8.32d6e8",
        "type": "ui_ui_control",
        "z": "92c67e1a.214f8",
        "name": "ui control",
        "x": 542.4387817382812,
        "y": 129.99441528320312,
        "wires": [
            []
        ]
    },
    {
        "id": "89c38c32.842bf",
        "type": "ui_group",
        "z": "",
        "name": "Stationsübersicht",
        "tab": "ff0416fd.ccd7f8",
        "order": 1,
        "disp": false,
        "width": "9"
    },
    {
        "id": "ff0416fd.ccd7f8",
        "type": "ui_tab",
        "z": "",
        "name": "Home",
        "icon": "device_hub",
        "order": 1
    }
]

```

---

<div class="post-metadata">

**Author:** ![RapinIot1](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rapiniot1/32/7086_2.png) [@RapinIot1](https://discourse.nodered.org/u/RapinIot1)\
**Post date:** [26 March 2019 23:29 UTC](https://discourse.nodered.org/t/show-image-as-icon-on-dashboard/806/14 "2019-03-26T23:29:05Z")

</div>

thank you so mush i use node red on win10 system. where i have put picture file

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/2ac33ecc06055f995485789152b9606efa4c8eb7.png) which folder . or if i want to put image in folder name "3m" where i have to create "3m" folder

---

<div class="post-metadata">

**Author:** ![bk1989](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bk1989/32/2826_2.png) [@bk1989](https://discourse.nodered.org/u/bk1989)\
**Post date:** [27 March 2019 06:08 UTC](https://discourse.nodered.org/t/show-image-as-icon-on-dashboard/806/15 "2019-03-27T06:08:54Z")

</div>

@RapinIot1 For Windows 10, the path to the images should first be edited in the folder  
_C:\Users\username\ .node-red_ in the file _settings.js_. Here I had to change line 94.

```auto
    // When httpAdminRoot is used to move the UI to a different root path, the
    // following property can be used to identify a directory of static content
    // that should be served at http://localhost:1880/.
    httpStatic: 'C:\\Users\\username\\Pictures',

```

This line of code specifies the folder in which the images are stored. Afterwards the pictures can be called up from the _Pictures_ folder.

---

<div class="post-metadata">

**Author:** ![RapinIot1](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rapiniot1/32/7086_2.png) [@RapinIot1](https://discourse.nodered.org/u/RapinIot1)\
**Post date:** [1 April 2019 21:32 UTC](https://discourse.nodered.org/t/show-image-as-icon-on-dashboard/806/16 "2019-04-01T21:32:55Z")

</div>

i get it......thank you so mush for help

---

<div class="post-metadata">

**Author:** ![dirk.schmeckthal](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dirk.schmeckthal/32/10735_2.png) [@dirk.schmeckthal](https://discourse.nodered.org/u/dirk.schmeckthal)\
**Post date:** [6 September 2019 18:31 UTC](https://discourse.nodered.org/t/show-image-as-icon-on-dashboard/806/17 "2019-09-06T18:31:07Z")

</div>

So how i do give those buttons IDs for adressing them?  
I have incoming UDP strings

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [6 September 2019 23:59 UTC](https://discourse.nodered.org/t/show-image-as-icon-on-dashboard/806/18 "2019-09-06T23:59:42Z")

</div>

Hi.

I don't want to make things more confusing than they already are, but you could also look at the `ui_MEDIA` node.

I am playing with it just now and it is handy for what I am doing: showing a picture on one machine on another's dashboard.