I'm trying to show my image logo on the dashboard.
It works on my local network, but not online.
I'm using node-red-contrib-ui-media do display the image and i'm using ngrok to access my dashboard online.
What is the URL? Did you use localhost?
as i said it works just fine when accessing my dashboard from my local network, using the ip address of my raspberry pi (where nodered is installed)
but when trying to access the dashboard from the internet using the subdomain from ngrok (https://mysubdomain.ngrok.io) everything works, but not the image it does not get loaded, as i show in the image
the image url just show the local folder of the images
Yes, but what is the URL of the image? Right click the image & tell us what the full URL is. And is it relative to the ngrok IP/URL?
What this mean?
No, I need the URL of the image in the browser.
Since you have stated it works locally but not via ngrok, I need you to find the URL of the missing image by inspecting the broken image icon.
So in your browser, right click the broken image icon, inspect the SRC of the un-rendered image - what is it?
When i inspect the code witb inspector that what the img src looks like,
When i right clicked to copy the link, this is how its presented
So do you have an endpoint in your node-red set to
/admin/uimedia/dashboardMedia/ to serve that file OR is
/admin/uimedia/dashboardMedia/ an actual file path with
LogoNSH.png file inside?
Or have you setup a public folder via
Lastly, what error do you see in your browsers dev tools (f12) console. 401? 404? Other?
Thanks for your help @Steve-Mcl
i did edit the
settings.js to point to
Ok, now we are getting close.
Can you show me the entry you made in settings file for
Also, can you tell me the full file path of the missing image (including path and filename)?
i edited this two line
the folder and image
What happens if you try to access
http://ip-of-node-red:1880/LogoNSH.png directly in your browser?
What happens if you set the
src of the
does not work
ok, with the img src set to
../LogoNSH.png can you once more inspect the URL - more specifically, what the browser thinks the URL is by hovering on the img element SRC value...
Cannot GET /ui/LogoNSH.png
Are you 100% certain you have edited and deployed the change? As you have
/ui/ in the URL - suggesting you either didnt deploy or you are looking at a cached page
Double check the img SRC is set to
../LogoNSH.png, double check it is deployed, hard refresh dashboard browser (CTRL+F5)
If it is still not working, please do what I asked in previous response by hovering your mouse over the URL like in the picture...
@Steve-Mcl i did this using the
node-red-contrib-ui-media you thing it would be better if i did it using the template node?
Ah, that is likely the issue - its may not geared up for serving URLs not under
Try a template node e.g.
<img src="../LogoNSH.png" width="120px" /> - if that works locally, then try ngrok.
works locally but not online.
i gave up @Steve-Mcl
this was supposed to be a simple thing but is getting to much time consuming
appreciate your help
Never give up
I suspect your ngrok is limiting access to the upper level
I can offer you an alternative solution where you serve the file(s) via an endpoint made out of http-in and http-response nodes in your flow if you want to try it?
OH - also, as an alternative, you could use a
base64 text version of your image & serve that.
See this: How to Display Base64 Images in HTML
and use this: https://www.base64-image.de/ - to convert your PNG to base64
(or read the file in using
file node and convert to base64 using the base64 node or a function node - then send it through a template node to construct a base64 URL img tag)