Display local image in dashboard

[Paul Reed]

I've read numerous post in the old ui group, none of which seem to work!

In a function node, I've got;

return {payload:"/images/background-cover.jpg"};

In a connected template node, I've got;

<img style="width: 100%" ng-src="{{msg.payload}}">

The image is not displayed in the dashboard, and if check the image address via right-click in browser, I see https://mysite.com:8443/images/background-cover.jpg

This is almost correct, as https://mysite.com/images/background-cover.jpg is the correct url to display the image.

Paul

[Dave C-J]

did you try the full correct url in the payload ?

[Paul Reed]

Yes, and that loads the image OK, however most of the previous forum posts (which didn't work!) were using relative url's, and I presumed that was deemed to be the better option...

However, now using full url's, and in the absence of NR dashboard weather icons, I've created copies of Erik Flowers weather icons, and load them as images, which look great, and a big improvement on Wundergrounds.

[Dave C-J]

well relative would work if you were serving them from a web server on the same port.. - but you seem to have Node-RED running at port 8443 so anything would be relative to there, unless the url was correct. You could use the httpStatic setting in settings.js to point to a directory of static files if you wanted to not run another web server.

[Peter Scargill]

I have tried every combination I can think of..

Here is my entry in the settings file

    httpStatic: '/home/pi/.node-red/public',

and in there I have a subdirectory called icons

I've tried /icons, icons, http://127.0.0.1:1880/icons - and several others including https versions - I cannot access the images - but if I put them on an external webserver they work a treat.

           <img ng-src="{{(msg.payload)?'/icons/glow_orange.png':'/icons/glow_green.png'}}" height="24px"/>&nbsp;

[Nicholas O'Leary]

Try a directory name other than 'icons'... if you've not changed httpAdminRoot to move where the editor is served from, then 'icons' will clash with a path the editor uses.

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/973e998b-6ad2-4f55-94dc-66be09489817%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Peter Scargill]

Absolutely correct Nick - might be an idea to put that up somewhere near where the doc talks about httpStatic....

Problem solved, thank you.

[Julian Knight]

Or maybe time to think about changing the default so that AdminRoot is moved to somewhere less likely to crash with serving up ordinary pages? I always put it on "/red" which works well for me personally.

[Peter Scargill]

Hmmm…

You received this message because you are subscribed to a topic in the Google Groups "Node-RED" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/node-red/bKIE3WASUjc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to node-red+u...@googlegroups.com.

To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/fab25d62-52e9-464e-8baa-260ae0c96ee9%40googlegroups.com.

[Jéan Roux]

Sorry to bother you guys with this, it seams you have your img problems sorted. 

Not sure if maybe my problem is as result of trying to show a .png file, but here goes.

settings.js  :

      httpStatic: '/home/pi/tools',

Stopped / started node-red, 

I have the .png file in: /home/pi/tools/dabar-energy_logo.png

in a UI_template:

    <img src="dabar-energy_logo.png" alt="dabar Logo" style="float:right;width:200px;height:160px;">

Not displaying, what should I do ?

[Nick O'Leary]

Hi,

using src="dabar-energy_logo.png" will mean the browser will try to load that file relative to the path the dashboard is served from - by default, /ui/dabar-energy_logo.png, which is not where httpStatic is serving the file from.

If you change the src attribute to: src="/dabar-energy_logo.ong" (added a / at the start) it will then load it from the root path - which is probably where you have httpStatic being served from.

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.

To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.

To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/49afeeb2-5f21-4bd8-9512-004f3481f0b6%40googlegroups.com.

[Jéan Roux]

Nick, thaank you, I did try that, and now again, still not working 8-(

On Tuesday, April 11, 2017 at 8:41:16 PM UTC+2, Nick O'Leary wrote:

Hi,

using src="dabar-energy_logo.png" will mean the browser will try to load that file relative to the path the dashboard is served from - by default, /ui/dabar-energy_logo.png, which is not where httpStatic is serving the file from.

If you change the src attribute to: src="/dabar-energy_logo.png" (added a / at the start) it will then load it from the root path - which is probably where you have httpStatic being served from.

On 11 April 2017 at 19:35, Jéan Roux <je...@familyroux.com> wrote:

Sorry to bother you guys with this, it seams you have your img problems sorted. 

Not sure if maybe my problem is as result of trying to show a .png file, but here goes.

settings.js  :

      httpStatic: '/home/pi/tools',

Stopped / started node-red, 

I have the .png file in: /home/pi/tools/dabar-energy_logo.png

in a UI_template:

    <img src="dabar-energy_logo.png" alt="dabar Logo" style="float:right;width:200px;height:160px;">

Not displaying, what should I do ?

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.

To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.

To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

[Jéan Roux]

Ahhh wait, I think I found it, I am using a changed version of the scargill install script, that one adds settings to the bottom of settigns.js, now I have 2 httpStatics, one live one, and one earlier commented out one......

[Jéan Roux]

Jip, that worked, thanks Nick.

[hate...@gmail.com]

I tried several time but it keeps telling me "No filename specified"

here is my nodes:

[{"id":"69065e89.eedcd","type":"http response","z":"e5910a38.372648","name":"","x":1080,"y":315.00004863739014,"wires":[]},{"id":"219a8083.148be","type":"function","z":"e5910a38.372648","name":"Set Content-Type header","func":"msg.headers = { \"Content-Type\":\"image/jpeg\"};\nreturn msg;","outputs":1,"noerr":0,"x":840.0000457763672,"y":251.00006198883057,"wires":[["69065e89.eedcd"]]},{"id":"15f2dab4.163595","type":"http in","z":"e5910a38.372648","name":"","url":"/testImage","method":"get","swaggerDoc":"","x":243.0000991821289,"y":261.0000514984131,"wires":[["8df2e6c7.4a8b78"]]},{"id":"f356a4a6.258b28","type":"function","z":"e5910a38.372648","name":"Adding File Name","func":"msg.payload=Number(msg.payload)\nif(msg.payload===0){\n    msg.filename=\"/home/pi/no1/node-red-dashboard/images/shutoffopen.jpg\";\n    return msg;\n}\nreturn msg.filename;","outputs":1,"noerr":0,"x":284.0003356933594,"y":379.00018882751465,"wires":[[]]},{"id":"8df2e6c7.4a8b78","type":"file in","z":"e5910a38.372648","name":"Picture Selector","filename":"","format":"","x":518.0000610351562,"y":382.0000686645508,"wires":[["219a8083.148be"]]},{"id":"4deeaa54.989e44","type":"inject","z":"e5910a38.372648","name":"","topic":"","payload":"0","payloadType":"num","repeat":"","crontab":"","once":false,"x":80.82986450195312,"y":332.9583492279053,"wires":[["f356a4a6.258b28","c179e05.82ced2"]]},{"id":"c179e05.82ced2","type":"function","z":"e5910a38.372648","name":"","func":"msg.filename=\"/home/no1/node-red-dashboard/images/shutoffopen.jpg\";\nreturn msg;","outputs":1,"noerr":0,"x":239.82988739013672,"y":448.95837020874023,"wires":[["8df2e6c7.4a8b78","eb067882.3f01b8"]]},{"id":"eb067882.3f01b8","type":"debug","z":"e5910a38.372648","name":"","active":true,"console":"false","complete":"false","x":532.8402862548828,"y":434.22918701171875,"wires":[]}]

[Zenofmud]

When the HTTP IN node is fired, you have it linked right to the file in node (Picture Selector) but you are not passing it a file name. If you send the  output on the HTTP IN node to the function node that defines the file name (the  node with no name) it will work.

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/05aa2fe4-e51e-42c6-b4cb-9a84bf1eb3e0%40googlegroups.com.