Dashboad 2 template node mouse click

Using dashboard 2 template node to show base64 encoded image:

<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

We have examples in the documentation: Template ui-template | Node-RED Dashboard 2.0

So, to extend what you have already:

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

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

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