# Image display on dashboard

**URL:** <https://discourse.nodered.org/t/image-display-on-dashboard/82937>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [16 November 2023 17:42 UTC](https://discourse.nodered.org/t/image-display-on-dashboard/82937 "2023-11-16T17:42:23Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![MachineInsights](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@MachineInsights](https://discourse.nodered.org/u/MachineInsights)\
**Post date:** [16 November 2023 17:42 UTC](https://discourse.nodered.org/t/image-display-on-dashboard/82937/1 "2023-11-16T17:42:23Z")

</div>

Hi all,  
I am hoping this is easy but it's driving me insane. I am trying to show an image on my dashboard from a template node and have updated the settings file with httpStatic line, I've added the image to the referenced folder and included the code on the node (pictures attached). All I get is the error icon for the image. I've tried both .png and .jpg and the image is 2904 x 192.

Any ideas where I am going wrong?

The node-red is running on a LoRaWan gateway and version looks to be v0.15.2

 ![Pirctures](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/9/09016c2a676b1eec73b0ab2bdaa2b4d8ea837255.jpeg)

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [16 November 2023 18:53 UTC](https://discourse.nodered.org/t/image-display-on-dashboard/82937/2 "2023-11-16T18:53:45Z")

</div>

I would suggest creating a directory for just for the shared content eg /public  
Put your content in there, then change the httpStatic line to the FULL path to that location.  
You shouldn't need the preceding / just the file name.

---

<div class="post-metadata">

**Author:** ![MachineInsights](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@MachineInsights](https://discourse.nodered.org/u/MachineInsights)\
**Post date:** [16 November 2023 19:25 UTC](https://discourse.nodered.org/t/image-display-on-dashboard/82937/3 "2023-11-16T19:25:27Z")

</div>

Cheers, I’ll give that a go and report back.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [16 November 2023 19:48 UTC](https://discourse.nodered.org/t/image-display-on-dashboard/82937/4 "2023-11-16T19:48:50Z")

</div>

Use a seperate directory as @Sean-McG suggests.

This is the httpStatic line in my settings.js

```auto
httpStatic: '/home/pi/.node-red/node-red-static/',

```

I think the forum inserted those colours and italics, vi doesn't have them.

I find that _I do have to precede filenames with /_ in my UI template.  
The image file is `/home/pi/.node-red/node-red-static/yr.no/weather.svg`.

```auto
<div>
    <img src = "/yr.no/weather.svg"></img>
</div>

```

---

<div class="post-metadata">

**Author:** ![MachineInsights](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@MachineInsights](https://discourse.nodered.org/u/MachineInsights)\
**Post date:** [16 November 2023 20:34 UTC](https://discourse.nodered.org/t/image-display-on-dashboard/82937/5 "2023-11-16T20:34:49Z")

</div>

Cheers for your help - got it in the end. Not sure what fixed it but rewrote path, converted image to 150dpi and 24-bit and removed a few erroneous // and one of those things fixed it

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [17 November 2023 00:58 UTC](https://discourse.nodered.org/t/image-display-on-dashboard/82937/6 "2023-11-17T00:58:24Z")

</div>

Could you share the httpStatic line and the path you use to the image please ?

---

<div class="post-metadata">

**Author:** ![MachineInsights](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@MachineInsights](https://discourse.nodered.org/u/MachineInsights)\
**Post date:** [17 November 2023 10:55 UTC](https://discourse.nodered.org/t/image-display-on-dashboard/82937/7 "2023-11-17T10:55:58Z")

</div>

This was the line:

httpStatic: '/opt/nodered/node-red/images/',

The reason why it appears that the full path isn't displayed is that the instance is running on a LoRaWAN gateway rather than a computer with hdd.

What I actually found is that there is a secondary folder set up elsewhere on the gateway which node-red is pointing to for the image. Not sure why but I replaced the image in the second location with the correct one and it worked. I'll diagnose later as to why the image source points differently to what is in the setting file.

---

<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:** [17 December 2023 10:56 UTC](https://discourse.nodered.org/t/image-display-on-dashboard/82937/8 "2023-12-17T10:56:48Z")

</div>

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