Image on dashboard

Dashboard
1

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

When accessing online through my custom ngrok subdomain it doesnt work

2

What is the URL? Did you use localhost?

3

hi @Steve-Mcl
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

4

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?

5

src="/admin/uimedia/dashboardMedia/LogoNSH.png"

What this mean?

6

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?

7

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

https://mysubdomain.ngrok.io/admin/uimedia/dashboardMedia/LogoNSH.png

8

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 settings.js httpStatic setting?

Lastly, what error do you see in your browsers dev tools (f12) console. 401? 404? Other?
e.g..

image
image831×358 31.5 KB

9

Thanks for your help @Steve-Mcl
i did edit the httpStatic on settings.js to point to /home/pi/.node-red/lib/ui-media/lib/dashboardMedia

Untitled-1
Untitled-11366×432 67.7 KB

10

Ok, now we are getting close.

Can you show me the entry you made in settings file for httpStatic

Also, can you tell me the full file path of the missing image (including path and filename)?

11

i edited this two line httpStatic and httpAdminRoot
the folder and image /home/pi/.node-red/lib/ui-media/lib/dashboardMedia LogoNSH.png

Capturar1
Capturar1805×286 37.1 KB

Capturar2
Capturar2697×226 30.1 KB

12

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 img to ../LogoNSH.png

13

it's works

does not work

14

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

image

15

Cannot GET /ui/LogoNSH.png

16

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

17

http://192.168.1.65:1880/LogoNSH.png

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

18

Ah, that is likely the issue - its may not geared up for serving URLs not under /ui/.

Try a template node e.g. <img src="../LogoNSH.png" width="120px" /> - if that works locally, then try ngrok.

19

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

20

Never give up :smiley:

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)