Show image from directory in dashboard

Hi, everyone , I´m newbie , I try to show image located in /home/pi/Img folder , also i configured settings.js file with static route but when try check image with url path show error like ''Cannot GET /Img.jpg", thanks for u time, best regards.

image

You didn't say how you are getting this file.

But assuming your file itself is called Img.jpg and is stored in the subfolder also called Img then you could use a node like this one called file in

image

[{"id":"f81f2d1e69e1336f","type":"file in","z":"559666c4e34e6ecf","name":"","filename":"/home/pi/Img/Img.jpg","format":"","chunk":false,"sendError":false,"encoding":"none","allProps":false,"x":980,"y":900,"wires":[["b96d86af1288fee4"]]},{"id":"b96d86af1288fee4","type":"image","z":"559666c4e34e6ecf","name":"","width":160,"data":"payload","dataType":"msg","thumbnail":false,"active":true,"pass":false,"outputs":0,"x":1200,"y":900,"wires":[]},{"id":"4075d9b71380810d","type":"inject","z":"559666c4e34e6ecf","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":790,"y":900,"wires":[["f81f2d1e69e1336f"]]}]

To then get that image to the dashboard, one way would be to use a template node. Here is one with a fansnazzy border around it. You may or may not need the base64 node.

image

[{"id":"f81f2d1e69e1336f","type":"file in","z":"559666c4e34e6ecf","name":"","filename":"/home/pi/Img/Img.jpg","format":"","chunk":false,"sendError":false,"encoding":"none","allProps":false,"x":900,"y":700,"wires":[["b96d86af1288fee4","ef8737c87a2de43e"]]},{"id":"b96d86af1288fee4","type":"image","z":"559666c4e34e6ecf","name":"","width":160,"data":"payload","dataType":"msg","thumbnail":false,"active":true,"pass":false,"outputs":0,"x":1120,"y":700,"wires":[]},{"id":"4075d9b71380810d","type":"inject","z":"559666c4e34e6ecf","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":710,"y":700,"wires":[["f81f2d1e69e1336f"]]},{"id":"3bc1aac50abaa6c6","type":"ui_template","z":"559666c4e34e6ecf","group":"eb23a053.4aa63","name":"Display image","order":1,"width":6,"height":"4","format":"<!DOCTYPE html>\n<html>\n<style>\n    .img {\n        border: 8px solid #000;\n        border-radius: 8px;\n        padding: 2px;\n        width: 260px;\n    }\n</style>\n\n<center>\n    <table>\n        <tr>\n            <!-- Row 1 -->\n            <td style=\"text-align: center\"><img src=\"data:image/jpg;base64,{{msg.payload}}\" class=img /></td>\n        </tr>\n    </table>\n</center>\n</html>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":1120,"y":640,"wires":[[]]},{"id":"ef8737c87a2de43e","type":"base64","z":"559666c4e34e6ecf","name":"","action":"str","property":"payload","x":940,"y":640,"wires":[["3bc1aac50abaa6c6"]]},{"id":"eb23a053.4aa63","type":"ui_group","name":"Snapshot","tab":"75252f1b.e6fdd","order":2,"disp":true,"width":"6","collapse":false},{"id":"75252f1b.e6fdd","type":"ui_tab","name":"Raspi Cam","icon":"camera","order":3,"disabled":false,"hidden":false}]
1 Like

Thank you so much, it´s working.!!

Welcome to this community!

I think you've stumbled onto a configuration issue, that is causing your static files to not be served... notice the paragraph in the comments right above your httpStatic setting line:

// When httpAdminRoot is used to move the UI to a different root path, ...

I cannot be sure, since it might be off the top of the screen image, but it does NOT look like you've changed the default httpAdminRoot url -- which is defaulting to /. if you check the node-red console logs after restarting node-red, you will see a line that shows which url and directory are being used to serve static file content, something like this:

 Welcome to Node-RED
 ===================
 27 Jul 00:22:28 - [info] Node-RED version: v1.2.2
 27 Jul 00:22:28 - [info] Node.js  version: v12.22.2
 27 Jul 00:22:28 - [info] Linux 4.14.232-177.418.amzn2.x86_64 x64 LE
 27 Jul 00:22:28 - [info] Loading palette nodes
 27 Jul 00:22:29 - [info] Settings file  : /opt/nodered/data/admin/settings.js
 27 Jul 00:22:29 - [info] HTTP Static    : /opt/nodered/public
 27 Jul 00:22:29 - [info] Context store  : 'default' [module=memory]
 27 Jul 00:22:29 - [info] User directory : /opt/nodered/data/admin
 27 Jul 00:22:29 - [warn] No active project : using default flows file
 27 Jul 00:22:29 - [info] Flows file     : /opt/nodered/data/admin/flows.json
 27 Jul 00:22:29 - [info] Server now running at http://127.0.0.1:18800/admin/

Once you do move the admin root url away from / the static file urls should work, even from the browser, just like you were trying to do. Much simpler than building a flow to serve the file contents, imo. Just remember that the static file url only includes the relative file path under your static directory -- so in my case, the file /opt/nodered/public/test/data.json would be served from url http://127.0.0.1:18800/test/data.json

Thank you so much

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