# 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:** 9\
**Page:** 2

<div class="post-metadata">

**Author:** ![bmneves](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bmneves/32/52830_2.png) [@bmneves](https://discourse.nodered.org/u/bmneves)\
**Post date:** [19 December 2021 16:10 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/21 "2021-12-19T16:10:06Z")

</div>

ok lets go

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [19 December 2021 16:12 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/22 "2021-12-19T16:12:09Z")

</div>

Update - you might have missed

...

> [@Steve-Mcl](#):
>
> 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)

Wanna give the simpler base64 method a go first?

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [19 December 2021 16:12 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/23 "2021-12-19T16:12:53Z")

</div>

> [@bmneves](#):
>
> > [@Steve-Mcl](#):
> >
> > What happens if you try to access `http://ip-of-node-red:1880/LogoNSH.png` directly in your browser?
> 
> it's works

you have established that the above works .. so why not simply try with one dot in the image src `./LogoNSH.png`

---

<div class="post-metadata">

**Author:** ![bmneves](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bmneves/32/52830_2.png) [@bmneves](https://discourse.nodered.org/u/bmneves)\
**Post date:** [19 December 2021 16:31 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/24 "2021-12-19T16:31:02Z")

</div>

with `./LogoNSH.png`it did not work

thanks @Steve-Mcl it worked with `template`and `base64 image`  
now i just need to resize the picture, can it be done by code, or need i new base64 image for each size i want the logo?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [19 December 2021 16:32 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/25 "2021-12-19T16:32:52Z")

</div>

can't you just set the width ...  
`<img src="../LogoNSH.png" width="120px" />` or use CSS?

---

<div class="post-metadata">

**Author:** ![bmneves](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bmneves/32/52830_2.png) [@bmneves](https://discourse.nodered.org/u/bmneves)\
**Post date:** [19 December 2021 16:34 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/26 "2021-12-19T16:34:13Z")

</div>

is not working

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [19 December 2021 16:36 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/27 "2021-12-19T16:36:45Z")

</div>

I think that might be something to do with angular JS stripping styling and properties from the HTML.

Try creating a style and CSS class that sets the image width etc then use that class name in your img tag

Google is your friend for that.

---

<div class="post-metadata">

**Author:** ![bmneves](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bmneves/32/52830_2.png) [@bmneves](https://discourse.nodered.org/u/bmneves)\
**Post date:** [19 December 2021 16:37 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/28 "2021-12-19T16:37:45Z")

</div>

@Steve-Mcl thank you very much

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [2 January 2022 16:37 UTC](https://discourse.nodered.org/t/image-on-dashboard/55399/29 "2022-01-02T16:37:50Z")

</div>

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

[Previous page](https://discourse.nodered.org/t/image-on-dashboard/55399.md?page=1)