# Dashboad 2 template node mouse click

**URL:** <https://discourse.nodered.org/t/dashboad-2-template-node-mouse-click/93940>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [16 December 2024 15:16 UTC](https://discourse.nodered.org/t/dashboad-2-template-node-mouse-click/93940 "2024-12-16T15:16:50Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![NodyRed](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@NodyRed](https://discourse.nodered.org/u/NodyRed)\
**Post date:** [16 December 2024 15:16 UTC](https://discourse.nodered.org/t/dashboad-2-template-node-mouse-click/93940/1 "2024-12-16T15:16:50Z")

</div>

Using dashboard 2 template node to show base64 encoded image:

```auto
<template>
    <img :src="`data:image/jpg;base64,${msg.payload}`" class="image1" />
</template>

```

How can fetch a mouse click on the image?  
Whenever a mouse click happens on the image, a message shall be sent from the node.  
I tried some other solutions but they did not work so far.

Or if some icons can be placed on the image that can be clicked on would also be a way

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [16 December 2024 15:30 UTC](https://discourse.nodered.org/t/dashboad-2-template-node-mouse-click/93940/2 "2024-12-16T15:30:19Z")

</div>

We have examples in the documentation: [Template ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#example-full-vue-component)

So, to extend what you have already:

```auto
<template>
    <img :src="`data:image/jpg;base64,${msg.payload}`" class="image1" @click="onClick"/>
</template>
<script>
export default {
   methods: {
      onClick: function () {
          const msg = {
             payload: 'Hello World'
          }
          this.send(msg)
      }
   }
}
</script>

```

---

<div class="post-metadata">

**Author:** ![NodyRed](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@NodyRed](https://discourse.nodered.org/u/NodyRed)\
**Post date:** [16 December 2024 15:45 UTC](https://discourse.nodered.org/t/dashboad-2-template-node-mouse-click/93940/3 "2024-12-16T15:45:29Z")

</div>

I was looking at these samples but had some issues with it. Your solutions works just fine. Thanks

---

<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:** [30 December 2024 15:45 UTC](https://discourse.nodered.org/t/dashboad-2-template-node-mouse-click/93940/4 "2024-12-30T15:45:32Z")

</div>

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