# Image integration in the dashboard

**URL:** https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398
**Category:** Dashboard
**Created:** [10 July 2024 10:07 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398 "2024-07-10T10:07:07Z")
**Posts on this page:** 17
**Page:** 2

<div class="post-metadata">

### Author: ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)
#### Post date: [11 July 2024 11:59 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/21 "2024-07-11T11:59:05Z")

</div>

I tried but it doesn't work

---

<div class="post-metadata">

### Author: ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)
#### Post date: [11 July 2024 12:00 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/22 "2024-07-11T12:00:35Z")

</div>

Nodered starts automatically. I'll try the command lines to see if I get the information.

---

<div class="post-metadata">

### Author: ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [11 July 2024 12:38 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/23 "2024-07-11T12:38:09Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/2/72047edc456badf24ecf7031ecc400c2df26767b.png)

my static folder is `c:\temp`

the file is saved in `c:\temp\test\gate_open.gif`

so i type `:1881/test/gate_open.gif`

---

<div class="post-metadata">

### Author: ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [11 July 2024 15:21 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/24 "2024-07-11T15:21:58Z")

</div>

> [@krambriw](#):
>
> Restarted Node-RED after the httpStatic change??

@Udina did you restart the machine after changing as @krambriw suggested ?

---

<div class="post-metadata">

### Author: ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)
#### Post date: [11 July 2024 15:40 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/25 "2024-07-11T15:40:41Z")

</div>

Yes, I restart the server whenever I make a change to a configuration file.

Here is the nodered startup report :

 ![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/c/accedd3134394b2958e424bd992d9eb5fb05eaae.png)

I have a broker problem at startup but I don't think it poses a problem for my image concerns. I don't see anything in the report that talks about "HTTPStatic"

---

<div class="post-metadata">

### Author: ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [11 July 2024 15:45 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/26 "2024-07-11T15:45:45Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cf4ba7e2a5bd1b60bdc650642e67b6e7863cb169.png)

I may be wrong, but do check if the changes you made for `httpstatic` in the settings file is the same file shown above?

---

<div class="post-metadata">

### Author: ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)
#### Post date: [11 July 2024 15:49 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/27 "2024-07-11T15:49:06Z")

</div>

Just as example from one of my computers, I have `httpStatic: '/var/www/html/pics/'`

So my images are in the `pics` folder and I can view them directly by typing `http://192.168.0.241:1880/captured21.jpg`

Therefore in my code in the ui-node I have:

```auto
<table>
    <tr><!-- Row 1 -->
    		<td style="text-align: center"><img src="/captured31.jpg" id='p31' width="405px"/></td>
   		    <td style="text-align: center"><img src="/captured12.jpg" id='p12' width="405px"/></td>
    		<td style="text-align: center"><img src="/captured41.jpg" id='p41' width="405px"/></td>
    		<td style="text-align: center"><img src="/captured11.jpg" id='p11' width="405px"/></td>
    </tr>
</table>
<table>
    <tr><!-- Row 2 -->
    		<td style="text-align: center"><img src="/captured32.jpg" id='p32' width="405px"/></td>
     		<td style="text-align: center"><img src="/captured22.jpg" id='p22' width="405px"/></td>
    		<td style="text-align: center"><img src="/captured21.jpg" id='p21' width="405px"/></td>
    <!--	<td style="text-align: center"><img src="/captured42.jpg" id='p42' width="405px"/></td> -->
   </tr>
</table>

```

As an example this works as expected. I think you need to double-check your settings

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/6/06586b99cabfc78f035a3ec17482013f3ab14e37.jpeg)

---

<div class="post-metadata">

### Author: ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)
#### Post date: [11 July 2024 16:01 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/28 "2024-07-11T16:01:34Z")

</div>

> [@smanjunath211](#):
>
> I may be wrong, but do check if the changes you made for `httpstatic` in the settings file is the same file shown abo

I think you found my problem !

I therefore have two instances of NodeRed, the first in this location ( This is where I make all my changes since installing Nodered ) :

 ![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/3/53207e8807e2de5ea14e623b809c63bc31c88885.png)

The second instance found here :

 ![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/c/3c4427846a236cc59b0f184f3b91d7d76655cfec.png)

I don't understand, I don't have the impression that this second instance was there a few days ago.

An idea ?

---

<div class="post-metadata">

### Author: ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [11 July 2024 16:12 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/29 "2024-07-11T16:12:37Z")

</div>

so make the httpstatic changes in the 'correct' settings file (which shows up in the startup log when you start node-red) and see if the problem is resolved ?

---

<div class="post-metadata">

### Author: ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)
#### Post date: [11 July 2024 16:21 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/30 "2024-07-11T16:21:29Z")

</div>

Modification succeeds, when starting nodered, the option of my static folder is mentioned

 ![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/0/c0e46881a4df5f331b889f4d24a3b411a09f91c9.png)

---

<div class="post-metadata">

### Author: ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)
#### Post date: [11 July 2024 21:12 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/31 "2024-07-11T21:12:54Z")

</div>

That's it, I managed to put an image, on the other hand, for a PNG image, how come I have a whole white surround ?

 ![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/8/08111d6bdbe5371d9be0205933a1c08dc8942fd9.png)

---

<div class="post-metadata">

### Author: ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [11 July 2024 22:08 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/32 "2024-07-11T22:08:32Z")

</div>

What is your ui-template size?

---

<div class="post-metadata">

### Author: ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)
#### Post date: [12 July 2024 08:14 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/33 "2024-07-12T08:14:32Z")

</div>

where can I find this information ?

 ![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/0/f065545e68ddd81f9472860814a412170923a087.png)

---

<div class="post-metadata">

### Author: ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)
#### Post date: [12 July 2024 08:44 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/34 "2024-07-12T08:44:10Z")

</div>

It's good, I found it, I work on my template directly on the web browser with the inspector element (f12), it works well. Thanks for taking the time to help me 👌 👍

---

<div class="post-metadata">

### Author: ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [12 July 2024 11:58 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/35 "2024-07-12T11:58:19Z")

</div>

glad you could find the solution. if you dont mind can you post the final solution picture and also please mark the relevant post as solution and mark the thread as closed.

---

<div class="post-metadata">

### Author: ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)
#### Post date: [12 July 2024 21:09 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/36 "2024-07-12T21:09:56Z")

</div>

Here is the final image that I recreated for the occasion. thanks again

 ![Capture.PNG](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/5/656af6f05b0ccfebad30048d6c0c94cd4730fe83.jpeg)

---

<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: [26 July 2024 21:10 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/37 "2024-07-26T21:10:57Z")

</div>

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

[Previous page](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398.md?page=1)