I have seen previous posts on this, but not got anything to work. I want to put an image (a logo) in the toolbar at the top of a Node-RED Dashboard: [image] I have tried this: https://flows.nodered.org/flow/9ddf29277057e4666c1923061a507aaa But that has some problems; The logo initially only …

OK, so the answer on serving-up local files - "static files" - became clear from this thread: [image] How to enable ability to input local image files in to node red dashboard Dashboard From online forums, I've been able to gleam that I need to make changes to both the /…

[image] awneil: I have tried this: Node-red-dashboard logo in header (flow) - Node-RED also this: [image] Set a logo in the title bar? Dashboard Hi all, Did any of you manage to do this? If not, I have some code which could help you out. Please have a look at thi…

Another one that puts the image in the dashboard body: node-red-contrib-ui-media A simple NODE to allow images and videos on the dashboard This one does seem to survive a browser refresh. But it seems to be doing some scaling of the image - and I see nothi…

[image] awneil: But it seems to be doing some scaling of the image - and I see nothing to control that. The scaling appears to be based on choice of layout setting in the node. "Expand" seems to fit to widget size setting. 3x3, 6x6 and 12x12 [image]

[image] Gunner: "Expand" seems to fit to widget size setting. only if the widget size is larger than the image? even then, it seems to have enlarged the image.

I can only speak for the image I used... PNG 800x800 pixels. Way larger than my smallest widgets or possibly even the entire card size. But then this has little to do with the original issue of an image in the header. I haven't had much success there either

[image] Gunner: I haven't had much success there either OK, aside form getting the image properly converted to Base64 (I used Image to Base64 | Base64 Encode | Base64 Converter | Base64 and the output option data:image/png;base64) The persistence issue is resolved with a timer (I picked out…

I was bored. Made another version of how to get logo to top-bar.. Script is targeted to document head so it does not take any space in layout and exists for all dashboard tabs and survives resets. [{"id":"d365d02956b1c509","type":"ui_template","z":"c95b36a3f921c249","group":"3ad2bc4a7ed3c9a3","nam…

[image] hotNipi: I was bored As always, your boredom is our blessing :smiley:

That's great - thanks. How do I get it to use a local image file on the Raspberry Pi?

Many threads about using the static folder of Node-RED, just do the search You just need to change the url for background image to point to relative path background-image: url(/images/your-local-file-name.png);

Node-RED

Node-RED Forum

Logo Image in Dashboard Toolbar

Dashboard

awneil 2 August 2021 19:09 2

also this:

but the forum will only allow a new user to post 2 links

Topic		Replies	Views
Display Image in Dashboard Dashboard	2	1477	9 December 2018
Node-red-dashboard logo in header Dashboard	5	496	28 October 2024
How to add my png to the Node-RED Dashboard? Dashboard node-red-dashboard	5	369	29 November 2025
Dynamic Image in Toolbar / Header Bar Share Your Projects	0	1741	20 December 2019
Displaying Image in Node Red Dashboard Dashboard node-red-dashboard , function-node , ui-template	27	843	28 November 2024

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Logo Image in Dashboard Toolbar

Related topics