# Image on dashboard
**URL:** https://discourse.nodered.org/t/image-on-dashboard/55399
**Category:** Dashboard
**Created:** [18 December 2021 19:16 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399 "2021-12-18T19:16:47Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@bmneves](https://discourse.nodered.org/u/bmneves)
#### Post date: [18 December 2021 19:16 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/1 "2021-12-18T19:16:47Z")
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
[ ](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/8/a8673df5d1da86a3618b4a29194fbd6fa473583b.png)
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [18 December 2021 21:37 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/2 "2021-12-18T21:37:58Z")
What is the URL? Did you use localhost?
---
### Author:  [@bmneves](https://discourse.nodered.org/u/bmneves)
#### Post date: [18 December 2021 21:43 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/3 "2021-12-18T21:43:48Z")
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](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
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [18 December 2021 23:45 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/4 "2021-12-18T23:45:47Z")
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?
---
### Author:  [@bmneves](https://discourse.nodered.org/u/bmneves)
#### Post date: [18 December 2021 23:52 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/5 "2021-12-18T23:52:15Z")
> src="/admin/uimedia/dashboardMedia/LogoNSH.png"
> [@Steve-Mcl](#):
>
> And is it relative to the ngrok IP/URL?
What this mean?
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [19 December 2021 08:54 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/6 "2021-12-19T08:54:23Z")
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?
---
### Author:  [@bmneves](https://discourse.nodered.org/u/bmneves)
#### Post date: [19 December 2021 13:48 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/7 "2021-12-19T13:48:48Z")
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](https://mysubdomain.ngrok.io/admin/uimedia/dashboardMedia/LogoNSH.png)
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [19 December 2021 13:58 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/8 "2021-12-19T13:58:26Z")
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..
---
### Author:  [@bmneves](https://discourse.nodered.org/u/bmneves)
#### Post date: [19 December 2021 14:21 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/9 "2021-12-19T14:21:14Z")
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`
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [19 December 2021 14:31 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/10 "2021-12-19T14:31:02Z")
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)?
---
### Author:  [@bmneves](https://discourse.nodered.org/u/bmneves)
#### Post date: [19 December 2021 14:39 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/11 "2021-12-19T14:39:36Z")
i edited this two line `httpStatic` and `httpAdminRoot`
the folder and image `/home/pi/.node-red/lib/ui-media/lib/dashboardMedia` `LogoNSH.png`
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [19 December 2021 15:10 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/12 "2021-12-19T15:10:22Z")
> [@bmneves](#):
>
> LogoNSH.png
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`
---
### Author:  [@bmneves](https://discourse.nodered.org/u/bmneves)
#### Post date: [19 December 2021 15:15 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/13 "2021-12-19T15:15:27Z")
> [@Steve-Mcl](#):
>
> What happens if you try to access `http://ip-of-node-red:1880/LogoNSH.png` directly in your browser?
it's works
> [@Steve-Mcl](#):
>
> What happens if you set the `src` of the `img` to `../LogoNSH.png`
does not work
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [19 December 2021 15:20 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/14 "2021-12-19T15:20:54Z")
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...
---
### Author:  [@bmneves](https://discourse.nodered.org/u/bmneves)
#### Post date: [19 December 2021 15:33 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/15 "2021-12-19T15:33:16Z")
> [@Steve-Mcl](#):
>
> ../LogoNSH.png
Cannot GET /ui/LogoNSH.png
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [19 December 2021 15:40 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/16 "2021-12-19T15:40:59Z")
> [@bmneves](#):
>
> 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](#):
>
> 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...
>
> 
---
### Author:  [@bmneves](https://discourse.nodered.org/u/bmneves)
#### Post date: [19 December 2021 15:57 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/17 "2021-12-19T15:57:47Z")
`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?
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [19 December 2021 16:00 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/18 "2021-12-19T16:00:01Z")
> [@bmneves](#):
>
> i did this using the `node-red-contrib-ui-media`
Ah, that is likely the issue - its may not geared up for serving URLs not under `/ui/`.
Try a template node e.g. `
` - if that works locally, then try ngrok.
---
### Author:  [@bmneves](https://discourse.nodered.org/u/bmneves)
#### Post date: [19 December 2021 16:06 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/19 "2021-12-19T16:06:38Z")
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
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [19 December 2021 16:08 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/20 "2021-12-19T16:08:48Z")
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](https://www.w3docs.com/snippets/html/how-to-display-base64-images-in-html.html)
and use this: [https://www.base64-image.de/](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)
[Next page](https://discourse.nodered.org/t/image-on-dashboard/55399.md?page=2)