Include local graphic on a template page

[gNeandr]

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:

   <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?

[smanjunath211]

@gNeandr

so not changed

I think you have to change.

this might help....

Changing a Dashboard Image upon boolean MQTT input

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. [immagine_2023-06-01_183308942] My question is if this can be done with any kind of bool…

[jbudd]

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

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

And to use an image in that directory you would have

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

[gNeandr]

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
displaying the flag symbol as expected.

The 'template' has:

    <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

[jbudd]

@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.

[gNeandr]

@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?

[jbudd]

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 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.

[gNeandr]

Got it!