# Include local graphic on a template page

**URL:** <https://discourse.nodered.org/t/include-local-graphic-on-a-template-page/88755>\
**Category:** General\
**Tags:** node-red-dashboard\
**Created:** [17 June 2024 10:35 UTC](https://discourse.nodered.org/t/include-local-graphic-on-a-template-page/88755 "2024-06-17T10:35:16Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [17 June 2024 10:35 UTC](https://discourse.nodered.org/t/include-local-graphic-on-a-template-page/88755/1 "2024-06-17T10:35:17Z")

</div>

Within an NR project, graphics (png/jpeg) should also be displayed to the user on a page within a descriptive text.  
Certainly not rocket science, but I can't find the connection of path/filename between the general project area` /home/pi/project` and the NR flows.

The 'settings.json' is default, so not changed.

To display the page, a `template` with `<style/>` and `<div/>` is used, e.g:

```auto
   <div>
      <p>

   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>
       <img title="German" src="/docs/flagDE.png" align="bottum">
       <!-- /home/pi/project/docs/flagDE.png -->
   Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

      </p>

   </div>

```

The specifications for `<img src="????">` are my problem.

_Where can I find an overview of how the path/file structures are related between NR nodes/flows and other project resources on the pi file system as shown above?_  
_Which settings are required to include such graphics in the text?_

---

<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:** [17 June 2024 12:04 UTC](https://discourse.nodered.org/t/include-local-graphic-on-a-template-page/88755/2 "2024-06-17T12:04:01Z")

</div>

> [@gNeandr](#):
>
> so not changed

I think you have to change.

this might help....

> [@Changing a Dashboard Image upon boolean MQTT input](https://discourse.nodered.org/t/changing-a-dashboard-image-upon-boolean-mqtt-input/78874):
>
> Hi, I'm fairly new to NodeRed, and I've been scratching my head on how to change a picture upon a boolean input. The thing that I want the program to do is display a certain image if the input is true, and display another image in case the input is false. In the picture, the two pictures I want to be alternating are the two with the forklifts in it, where the air vent on the top right is open or closed. My question is if this can be done with any kind of bool…

---

<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:** [17 June 2024 12:31 UTC](https://discourse.nodered.org/t/include-local-graphic-on-a-template-page/88755/3 "2024-06-17T12:31:04Z")

</div>

You need to change `httpStatic` in settings.js to the absolute pathname of your static content directory.  
For example

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

```

And to use an image in that directory you would have

```auto
<div>
   <img src="/mypic.jpg">
</div>

```

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [17 June 2024 12:51 UTC](https://discourse.nodered.org/t/include-local-graphic-on-a-template-page/88755/4 "2024-06-17T12:51:55Z")

</div>

Thanks to @jbudd and @smanjunath211

Yes, changing the `settings.json` with `httpStatic: '/home/pi/',` did the job.

Restarting node-red logs that with:  
`17 Jun 14:23:20 - [info] HTTP Static : /home/pi > /`  
Looks a bit strange, but works...

A first check was OK:  
[http://raspberryIP:1880/project/docs/flagDE.png](http://raspberryIP:1880/project/docs/flagDE.png)  
displaying the flag symbol as expected.

The 'template' has:

```auto
    <img title="German" src="/project/docs/flagDE.png" align="bottum">
    <!-- file location of the png /home/pi/project/docs/flagDE.png -->

```

Great help to remind about the importance of the settings.json.  
_A general overview of the path/file structure would make the relationships easier to understand ... but I have not found one_

---

<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:** [17 June 2024 13:31 UTC](https://discourse.nodered.org/t/include-local-graphic-on-a-template-page/88755/5 "2024-06-17T13:31:13Z")

</div>

> [@gNeandr](#):
>
> Yes, changing the `settings.json` with `httpStatic: '/home/pi/',` did the job.

You should use a subdirectory of /home/pi/.node-red since everything in the directory becomes visible to the Node-red web page.

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [17 June 2024 22:11 UTC](https://discourse.nodered.org/t/include-local-graphic-on-a-template-page/88755/6 "2024-06-17T22:11:32Z")

</div>

> [@jbudd](#):
>
> /home/pi/.node-red

But with that the whole NR installation "becomes visible to the Node-red web page." ... isn't it better to have `httpStatic: '/home/pi/nrprojects/` and have the indivdual projects below that?

---

<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:** [17 June 2024 22:22 UTC](https://discourse.nodered.org/t/include-local-graphic-on-a-template-page/88755/7 "2024-06-17T22:22:46Z")

</div>

Well I did say to use _a subdirectory of .node-red._  
On my Pi I have httpStatic: '/home/pi/.node-red/node-red-static',

> [@gNeandr](#):
>
> "becomes visible to the Node-red web page."

Sorry I don't know a more appropriate wording but I am sure it exists.  
I think I initially said "visible in the browser" but when I tested it with `/home/pi/mysecretpassword.txt`, instead of displaying "Password1" in the browser, the url [192.168.1.11:1880/mysecretpassword.txt](https://192.168.1.11:1880/mysecretpassword.txt) opened up a download dialog. Either way my password is now out there in public!

> [@gNeandr](#):
>
> httpStatic: '/home/pi/nrprojects/ and have the indivdual projects below that?

I don't use projects so I can't comment.

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [17 June 2024 22:29 UTC](https://discourse.nodered.org/t/include-local-graphic-on-a-template-page/88755/8 "2024-06-17T22:29:20Z")

</div>

Got it! 👍