# Show and unshow picture on the dashboard

**URL:** <https://discourse.nodered.org/t/show-and-unshow-picture-on-the-dashboard/84408>\
**Category:** Dashboard\
**Created:** [9 January 2024 06:24 UTC](https://discourse.nodered.org/t/show-and-unshow-picture-on-the-dashboard/84408 "2024-01-09T06:24:17Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![f5swb](https://avatars.discourse-cdn.com/v4/letter/f/c37758/32.png) [@f5swb](https://discourse.nodered.org/u/f5swb)\
**Post date:** [9 January 2024 06:24 UTC](https://discourse.nodered.org/t/show-and-unshow-picture-on-the-dashboard/84408/1 "2024-01-09T06:24:17Z")

</div>

Hello guys, I need some help here, I'm trying to do something when i get a message in the msg.payload (for example:

1. I want to display an image in the dashboard, but when it is something else on the msg.payload (for  
example:
2. i want the image to disappear.

the question is quite simple : how to make visible or unvisible picture ?

Many thanks in advance 🙂

Dimitri.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [9 January 2024 06:57 UTC](https://discourse.nodered.org/t/show-and-unshow-picture-on-the-dashboard/84408/2 "2024-01-09T06:57:38Z")

</div>

There are many posts about this [Search results for 'show image in dashboard' - Node-RED Forum](https://discourse.nodered.org/search?q=show%20image%20in%20dashboard). If you try some of the many examples, if you have issues post back with example of what you have tried, then members here will be pleased to offer assistance as to what the issue may be.

---

<div class="post-metadata">

**Author:** ![f5swb](https://avatars.discourse-cdn.com/v4/letter/f/c37758/32.png) [@f5swb](https://discourse.nodered.org/u/f5swb)\
**Post date:** [9 January 2024 09:25 UTC](https://discourse.nodered.org/t/show-and-unshow-picture-on-the-dashboard/84408/3 "2024-01-09T09:25:58Z")

</div>

Many thanks E1cid,  
before I send my question I searched it and I didn't found how to unvisible / unshow a picture which has been launched on the dashboard 🙂

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 January 2024 11:20 UTC](https://discourse.nodered.org/t/show-and-unshow-picture-on-the-dashboard/84408/4 "2024-01-09T11:20:16Z")

</div>

There is of course many ways to do it, but here's one example of **basics** how it can be done.

```auto
[{"id":"c10bda71353ded21","type":"ui_template","z":"d418230481b87e35","group":"55888982bdd0637f","name":"TEST","order":5,"width":0,"height":0,"format":"<style>\n .change-visibilitiy-with-message.show .element-to-hide{\n display:block;\n }\n .change-visibilitiy-with-message.hide .element-to-hide{\n display:none;\n }\n</style>\n<div class=\"element-to-hide\">\n <!--your content here-->\n \n <!--remove TEST-->\n TEST\n <!--remove TEST-->\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"change-visibilitiy-with-message","x":530,"y":2100,"wires":[[]]},{"id":"2c9e9c26e5733809","type":"inject","z":"d418230481b87e35","name":"visible","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"className","v":"change-visibilitiy-with-message show","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":390,"y":2080,"wires":[["c10bda71353ded21"]]},{"id":"a9e54987ff08d948","type":"inject","z":"d418230481b87e35","name":"hidden","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"className","v":"change-visibilitiy-with-message hide","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":390,"y":2120,"wires":[["c10bda71353ded21"]]},{"id":"55888982bdd0637f","type":"ui_group","name":"1. group","tab":"62083694d0eab7ca","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"62083694d0eab7ca","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<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:** [8 February 2024 11:20 UTC](https://discourse.nodered.org/t/show-and-unshow-picture-on-the-dashboard/84408/5 "2024-02-08T11:20:53Z")

</div>

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