# Image selection by comparison

**URL:** <https://discourse.nodered.org/t/image-selection-by-comparison/91043>\
**Category:** Dashboard\
**Created:** [17 September 2024 11:56 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043 "2024-09-17T11:56:35Z")\
**Posts on this page:** 19\
**Page:** 2

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [20 September 2024 01:24 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/21 "2024-09-20T01:24:08Z")

</div>

> [@Udina](#):
>
> to change the topic

or you can change the property in switch nodes to whatever topic your mqtt is pushing.  
glad you could find the solution. it is usually encouraged in this forum to just guide and not give solution directly, but as a beginner i have found that sometimes a working solution encourages them to go further and not get frustrated and give up.  
this is the best forum i have ever been and am also happy i am able to guide few beginners in basic stuff. 🙂

---

<div class="post-metadata">

**Author:** ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)\
**Post date:** [24 September 2024 11:27 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/22 "2024-09-24T11:27:29Z")

</div>

Hello, I am encountering a problem, this flow no longer works on dashboard 2 which I am starting to use.  
Is there another method to use for the node Template ?

 ![Capture d’écran 2024-09-24 132715](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/3/537feb5a9d93de3ac6314d6b13886833b71cb2f2.png)  
 ![Capture d’écran 2024-09-24 132810](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/2/b219f0a0f10bb5a6aa9861b9fe0ca31ab0461414.png)

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [24 September 2024 11:49 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/23 "2024-09-24T11:49:31Z")

</div>

the flow upto the template node will be same, however DB-2 has a different template format as it is not based on angular but Vue.

someone else will definitley help you, as i am still not well verse with DB2.

---

<div class="post-metadata">

**Author:** ![OriolFM](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/oriolfm/32/30710_2.png) [@OriolFM](https://discourse.nodered.org/u/OriolFM)\
**Post date:** [24 September 2024 12:58 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/24 "2024-09-24T12:58:08Z")

</div>

Not exactly what you were asking, but relevant to the topic:

This is a use case for the [node-red-contrib-finite-statemachine](https://flows.nodered.org/node/node-red-contrib-finite-statemachine#:~:text=A%20Node-RED%20node%20that%20implements%20a%20finite%20state) node. You can define a whole state machine that is triggered every few seconds, reads inputs, and jumps to the next state if appropriate.

If you go for the Moore approach of the state machine, the outputs (like the image) depend only of the state in which the machine is at any given time. So it could be Open, Closed, Opening, or Closing (these last two cases would use the same picture, but you could overimpose an SVG arrow on top to show if it's opening or closing).

For applications like this, you can simplify your flows a lot if you just use the finite state machine to define all the states and transitions, and then a subflow (or a function node with a switch-case) with all the transition logic based on inputs.

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [24 September 2024 15:21 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/25 "2024-09-24T15:21:22Z")

</div>

Coding a Finite State Machine (FSM) in pure JavaScript isn't too difficult.  
Here are a couple of examples.

> [@Matt's Mathematical Magic Machine (M4)](https://discourse.nodered.org/t/matts-mathematical-magic-machine-m4/19775):
>
> This is just pure fun!!! Think of a number between 1 and 15 and this magical machine will find out what it is for you. Here's the magical code with an embedded FSM (it uses the node ui\_table which you may need to install). I've used the 'dark theme' for the dashboard. You might want to change the (yellow) font colour. [{"id":"c54a85f8.963e","type":"subflow","name":"Card\_4","info":"","c…

> [@Finite State Machine (FSM) with delay](https://discourse.nodered.org/t/finite-state-machine-fsm-with-delay/88275):
>
> I was asked the other day about how to create a Finite State Machine (FSM) with different delays between various transitions. Here is a simple example, based on the UK traffic light sequence, that makes use of the msg.delay option in the Delay node. Here's a screenshot of the flow. [{"id":"be3ab1ef.3f0a68","type":"tab","label":"Traffic Lights with variable delay","disabled":false,"info":"","env":[]},{"id":"743e732.c12228c","type":"function","z":"be3ab1ef.3f0a68","name":"Decode…

---

<div class="post-metadata">

**Author:** ![OriolFM](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/oriolfm/32/30710_2.png) [@OriolFM](https://discourse.nodered.org/u/OriolFM)\
**Post date:** [25 September 2024 06:10 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/26 "2024-09-25T06:10:30Z")

</div>

Sure, but this is one of those cases in which a specialised node simplifies the implementation (and makes it much faster).

Granted, in the door example might not be that important, but I've used the node for state machines with more than 70 states and it works like a charm.

---

<div class="post-metadata">

**Author:** ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)\
**Post date:** [25 September 2024 11:15 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/27 "2024-09-25T11:15:44Z")

</div>

Thank you for your answers, I just deleted my entire dashboard (version 1) to concentrate on dashboard 2 and there is a little change anyway. I'm looking for a good tutorial for the basics, do you have any good links to give me?

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [25 September 2024 20:14 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/28 "2024-09-25T20:14:09Z")

</div>

Not sure if you have read these pages

[About Node-RED Dashboard 2.0 | Node-RED Dashboard 2.0 (flowfuse.com)](https://dashboard.flowfuse.com/about.html)

---

<div class="post-metadata">

**Author:** ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)\
**Post date:** [2 October 2024 15:45 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/29 "2024-10-02T15:45:50Z")

</div>

Hello everyone, I recreated my 2.0 dashboard and I studied the state machine which remains a little vague in the configuration for me. I would first like to know how to integrate a .png image into a “Template” node between my two buttons below :

 ![Capture d’écran 2024-10-02 173305](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/6/a6e857014103262f291dd135728e3c4cbd177f91.jpeg)

My image files are located in a folder on my RaspberrryPi5:

/home/img/ouvert.png  
/home/img/ferme.png  
/home/img/portillon.png

I use the following code to just display the image but it doesn't work.

```auto
<template>
    <div>
        <img :src= "/ouvert.png" alt="Image loaded from the filestore" style="width:100%"><br>
    </div>
</template>

```

I tried to follow the following link but I can't do it either.

[https://flowfuse.com/blog/2023/07/images-in-node-red-dashboards/](https://flowfuse.com/blog/2023/07/images-in-node-red-dashboards/)

Can you help me please ?

---

<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:** [2 October 2024 16:27 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/30 "2024-10-02T16:27:34Z")

</div>

> [@Udina](#):
>
> /home/img/ouvert.png  
> /home/img/ferme.png  
> /home/img/portillon.png

Have you setup `httpStatic` in the [settings file](https://nodered.org/docs/user-guide/runtime/configuration) to serve these files to the browser?

Example:

- [How to put image background in the Node-Red (Raspberry Pi 5) - #4 by jbudd](https://discourse.nodered.org/t/how-to-put-image-background-in-the-node-red-raspberry-pi-5/87741/4)
- [Loading images in Markdown node - #8 by arturv2000](https://discourse.nodered.org/t/loading-images-in-markdown-node/89292/8)

---

<div class="post-metadata">

**Author:** ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)\
**Post date:** [2 October 2024 17:25 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/31 "2024-10-02T17:25:53Z")

</div>

> [@Steve-Mcl](#):
>
> Avez-vous configuré `httpStatic` dans le [fichier de paramètres](https://nodered.org/docs/user-guide/runtime/configuration) pour servir ces fichiers au navigateur ?

Yes, the settings.js file is configured with HTTPstatic. The tempate nodes worked on my dashboard 1.

---

<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:** [2 October 2024 17:41 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/32 "2024-10-02T17:41:15Z")

</div>

ok, i spotted your deliberate error 😉

you have `:src= "/ouvert.png"` it should be `src= "/ouvert.png"`

When you put `:src="SOMETHING"` you are telling dashboard to evaluate a variable named `SOMETHING` and then apply that to the `src` attribute.

This `:` is for [attribute binding in VUE](https://vuejs.org/guide/essentials/template-syntax.html#attribute-bindings)

in other words, the dashboard was trying to evaluate the value of `this['/ouvert.png']` - which doesn't exist (i.e. `undefined`)

---

<div class="post-metadata">

**Author:** ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)\
**Post date:** [2 October 2024 18:23 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/33 "2024-10-02T18:23:14Z")

</div>

Thanks for spotting the error, it works fine now. 👍

 ![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/8/9845c6ccbd8d029dcf5128c0e5089a25218d4acc.png)

I will try to redo the selection of images from a state machine.

---

<div class="post-metadata">

**Author:** ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)\
**Post date:** [2 October 2024 19:23 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/34 "2024-10-02T19:23:18Z")

</div>

What is the replacement syntax for the selector (mustache) which will replace: `img src={{img}}` by VUE compatible syntax in order to select the correct image of the three?

---

<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:** [2 October 2024 20:17 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/35 "2024-10-02T20:17:02Z")

</div>

> [@Udina](#):
>
> What is the replacement syntax

I told you before...

> [@Steve-Mcl](#):
>
> When you put `:src="SOMETHING"` you are telling dashboard to evaluate a variable named `SOMETHING` and then apply that to the `src` attribute.
> 
> This `:` is for [attribute binding in VUE](https://vuejs.org/guide/essentials/template-syntax.html#attribute-bindings)

---

<div class="post-metadata">

**Author:** ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)\
**Post date:** [3 October 2024 13:20 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/36 "2024-10-03T13:20:36Z")

</div>

Sorry, it was me who expressed myself incorrectly, there are no two dots (🙂 in the code, here is how it is actually written

 ![Capture d’écran 2024-10-03 151346](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/7/0700293a46e7e8007a59b423b469420aa5a63cb8.png)  
Below is the complete code which worked under my dashboard 1 but which no longer works under my dashboard 2

```auto
[
    {
        "id": "05c47a899779d1ba",
        "type": "mqtt in",
        "z": "a3c2cda0fd0187df",
        "name": "",
        "topic": "Etat/capteur/portail/ouvert",
        "qos": "2",
        "datatype": "auto-detect",
        "broker": "b690438f99f8231b",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 150,
        "y": 360,
        "wires": [
            [
                "939930196a253988",
                "73f3b35b4398ef57"
            ]
        ]
    },
    {
        "id": "be6e73f796b9f46c",
        "type": "mqtt in",
        "z": "a3c2cda0fd0187df",
        "name": "",
        "topic": "Etat/capteur/portail/ferme",
        "qos": "2",
        "datatype": "auto-detect",
        "broker": "b690438f99f8231b",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 150,
        "y": 420,
        "wires": [
            [
                "9cb6f5ff2f452414",
                "a1f18da35dd4a5a8"
            ]
        ]
    },
    {
        "id": "939930196a253988",
        "type": "change",
        "z": "a3c2cda0fd0187df",
        "name": "Change topic open",
        "rules": [
            {
                "t": "change",
                "p": "topic",
                "pt": "msg",
                "from": "Etat/capteur/portail/ouvert",
                "fromt": "str",
                "to": "open",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 410,
        "y": 300,
        "wires": [
            [
                "ac4c4104c6383254"
            ]
        ]
    },
    {
        "id": "ac4c4104c6383254",
        "type": "join",
        "z": "a3c2cda0fd0187df",
        "name": "Jonction des topics",
        "mode": "custom",
        "build": "object",
        "property": "payload",
        "propertyType": "msg",
        "key": "topic",
        "joiner": "\\n",
        "joinerType": "str",
        "accumulate": true,
        "timeout": "",
        "count": "2",
        "reduceRight": false,
        "reduceExp": "",
        "reduceInit": "",
        "reduceInitType": "",
        "reduceFixup": "",
        "x": 430,
        "y": 380,
        "wires": [
            [
                "91533b8eec6b8189"
            ]
        ]
    },
    {
        "id": "9cb6f5ff2f452414",
        "type": "change",
        "z": "a3c2cda0fd0187df",
        "name": "Change topic close",
        "rules": [
            {
                "t": "change",
                "p": "topic",
                "pt": "msg",
                "from": "Etat/capteur/portail/ferme",
                "fromt": "str",
                "to": "close",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 410,
        "y": 480,
        "wires": [
            [
                "ac4c4104c6383254"
            ]
        ]
    },
    {
        "id": "91533b8eec6b8189",
        "type": "switch",
        "z": "a3c2cda0fd0187df",
        "name": "Open",
        "property": "payload.open",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "0",
                "vt": "num"
            },
            {
                "t": "eq",
                "v": "1",
                "vt": "num"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 2,
        "x": 630,
        "y": 380,
        "wires": [
            [
                "212535da6fa112f5"
            ],
            [
                "f55fb38745c98c88"
            ]
        ]
    },
    {
        "id": "212535da6fa112f5",
        "type": "switch",
        "z": "a3c2cda0fd0187df",
        "name": "Close",
        "property": "payload.close",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "0",
                "vt": "num"
            },
            {
                "t": "eq",
                "v": "1",
                "vt": "num"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 2,
        "x": 630,
        "y": 300,
        "wires": [
            [],
            [
                "32eb3b37e2ef367c"
            ]
        ]
    },
    {
        "id": "f55fb38745c98c88",
        "type": "switch",
        "z": "a3c2cda0fd0187df",
        "name": "Close",
        "property": "payload.close",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "0",
                "vt": "num"
            },
            {
                "t": "eq",
                "v": "1",
                "vt": "num"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 2,
        "x": 630,
        "y": 460,
        "wires": [
            [
                "70b64063517a6ed9"
            ],
            [
                "c8a571bb6fb20f87"
            ]
        ]
    },
    {
        "id": "32eb3b37e2ef367c",
        "type": "change",
        "z": "a3c2cda0fd0187df",
        "name": "Open:0 Close-1 \\n OPEN",
        "rules": [
            {
                "t": "set",
                "p": "img",
                "pt": "msg",
                "to": "/ouvert.png",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 820,
        "y": 300,
        "wires": [
            [
                "65882687c2bbf1e8"
            ]
        ]
    },
    {
        "id": "70b64063517a6ed9",
        "type": "change",
        "z": "a3c2cda0fd0187df",
        "name": "Open:1 Close:0 \\n CLOSED",
        "rules": [
            {
                "t": "set",
                "p": "img",
                "pt": "msg",
                "to": "/ferme.png",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 820,
        "y": 420,
        "wires": [
            [
                "65882687c2bbf1e8"
            ]
        ]
    },
    {
        "id": "c8a571bb6fb20f87",
        "type": "change",
        "z": "a3c2cda0fd0187df",
        "name": "Open:1 Close:1 \\n PARTIALLY OPEN",
        "rules": [
            {
                "t": "set",
                "p": "img",
                "pt": "msg",
                "to": "/portillon.png",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 830,
        "y": 520,
        "wires": [
            [
                "65882687c2bbf1e8"
            ]
        ]
    },
    {
        "id": "73f3b35b4398ef57",
        "type": "debug",
        "z": "a3c2cda0fd0187df",
        "name": "Ouvert",
        "active": true,
        "tosidebar": false,
        "console": false,
        "tostatus": true,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "payload",
        "statusType": "auto",
        "x": 190,
        "y": 300,
        "wires": []
    },
    {
        "id": "a1f18da35dd4a5a8",
        "type": "debug",
        "z": "a3c2cda0fd0187df",
        "name": "Fermé",
        "active": true,
        "tosidebar": false,
        "console": false,
        "tostatus": true,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "payload",
        "statusType": "auto",
        "x": 190,
        "y": 480,
        "wires": []
    },
    {
        "id": "02c7dfa32b4a25ec",
        "type": "ui-template",
        "z": "a3c2cda0fd0187df",
        "group": "d8041a2154939ee4",
        "page": "",
        "ui": "",
        "name": "Display the image on the Dashboard",
        "order": 2,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1250,
        "y": 420,
        "wires": [
            []
        ]
    },
    {
        "id": "65882687c2bbf1e8",
        "type": "template",
        "z": "a3c2cda0fd0187df",
        "name": "",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<template>\n <div>\n <img src= {{img}} alt=\"Image loaded from the filestore\" style=\"width:100%\"><br>\n </div>\n</template>",
        "output": "str",
        "x": 1000,
        "y": 420,
        "wires": [
            [
                "02c7dfa32b4a25ec"
            ]
        ]
    },
    {
        "id": "b690438f99f8231b",
        "type": "mqtt-broker",
        "name": "",
        "broker": "192.168.1.13",
        "port": "1883",
        "clientid": "",
        "autoConnect": true,
        "usetls": false,
        "protocolVersion": "4",
        "keepalive": "60",
        "cleansession": true,
        "autoUnsubscribe": true,
        "birthTopic": "",
        "birthQos": "0",
        "birthRetain": "false",
        "birthPayload": "",
        "birthMsg": {},
        "closeTopic": "",
        "closeQos": "0",
        "closeRetain": "false",
        "closePayload": "",
        "closeMsg": {},
        "willTopic": "",
        "willQos": "0",
        "willRetain": "false",
        "willPayload": "",
        "willMsg": {},
        "userProps": "",
        "sessionExpiry": ""
    },
    {
        "id": "d8041a2154939ee4",
        "type": "ui-group",
        "name": "Portail d'entrée",
        "page": "242784246503bab6",
        "width": "6",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "242784246503bab6",
        "type": "ui-page",
        "name": "Portails",
        "ui": "acf62d88f4bd3d87",
        "path": "portails",
        "icon": "home",
        "layout": "grid",
        "theme": "18acbce16a65bbb8",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "acf62d88f4bd3d87",
        "type": "ui-base",
        "name": "Maison",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "showPageTitle": true,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "18acbce16a65bbb8",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#9ba50e",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#474747",
            "groupOutline": "#000000"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

---

<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:** [3 October 2024 14:25 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/37 "2024-10-03T14:25:11Z")

</div>

> [@Udina](#):
>
> there are no two dots

There should be. And by two dots I assume you are referring to the `:` colon.

Please read again what i have written twice now.

> [@Udina](#):
>
> here is how it is actually written
> 
> ![Capture d’écran 2024-10-03 151346](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/7/0700293a46e7e8007a59b423b469420aa5a63cb8.png)

and that is wrong for dashboard 2

dashboard to uses VUE. Vue uses attribute binding. I have also provide a link to a help source.  
Here it is again...

> [@Steve-Mcl](#):
>
> When you put `:src="SOMETHING"` you are telling dashboard to evaluate a variable named `SOMETHING` and then apply that to the `src` attribute.
> 
> This `:` is for [attribute binding in VUE](https://vuejs.org/guide/essentials/template-syntax.html#attribute-bindings)

So you should use that e.g. `:img="your_variable"`

---

<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:** [3 October 2024 14:31 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/38 "2024-10-03T14:31:10Z")

</div>

Also, if you are expecting to use `img` from the `msg` object, the HTML attribute should be bound to `msg.img` e.g `:img="msg.img"`

---

<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:** [17 October 2024 14:31 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/39 "2024-10-17T14:31:24Z")

</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-selection-by-comparison/91043.md?page=1)