# Base64 image is not working on dashboard 2.0

**URL:** <https://discourse.nodered.org/t/base64-image-is-not-working-on-dashboard-2-0/91318>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [28 September 2024 00:27 UTC](https://discourse.nodered.org/t/base64-image-is-not-working-on-dashboard-2-0/91318 "2024-09-28T00:27:10Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![iotkismec](https://avatars.discourse-cdn.com/v4/letter/i/3be4f8/32.png) [@iotkismec](https://discourse.nodered.org/u/iotkismec)\
**Post date:** [28 September 2024 00:27 UTC](https://discourse.nodered.org/t/base64-image-is-not-working-on-dashboard-2-0/91318/1 "2024-09-28T00:27:10Z")

</div>

Hi. below is the dataURI that is worked in dashboard v1 but not in v2.

```auto
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB0CAYAAABUmhYnAAAAAklEQVR4AewaftIAAALPSURBVO3BQa7jSAwFwUxC97/yGy+5KkCQ7OlPMMJ8sMYo1ijFGqVYoxRrlGKNUqxRijVKsUYp1ijFGqVYoxRrlGKNUqxRijXKxUMqv5SEO1S6JNyh8ktJeKJYoxRrlGKNcvGyJLxJ5USlS8IdKl0STpLwJpU3FWuUYo1SrFEuvkzljiTckYSTJHQqXRKeULkjCd9UrFGKNUqxRrkYRuUkCZMVa5RijVKsUS7+OJWTJHQqJ0n4y4o1SrFGKdYoF1+WhG9KQqdyRxKeSMK/pFijFGuUYo1y8TKVX1LpktCpdEnoVLoknKj8y4o1SrFGKdYo5oNBVE6SMFmxRinWKMUa5eIhlS4JnUqXhE6lS0Kn0iXhJAmdyolKl4Q7VLoknKh0SXhTsUYp1ijFGsV88EUqTyShU+mScKJykoROpUtCp9Il4Q6VkyQ8UaxRijVKsUa5eEilS8JJEu5QOVH5JpU7VP5PxRqlWKMUaxTzwQ+p3JGEE5VvSkKncpKEE5UuCW8q1ijFGqVYo5gPHlDpktCpdEnoVLokdCpdEk5U7khCp3JHEjqVLgmdykkSnijWKMUapVijmA/+MJUuCW9S6ZJwotIl4USlS8ITxRqlWKMUa5SLh1R+KQldEjqVLgknKl0SuiScqNyh8k3FGqVYoxRrlIuXJeFNKnckoVPpktAl4USlS0KXhCeS8KZijVKsUYo1ysWXqdyRhDtUnlDpknCHykkSTlS6JDxRrFGKNUqxRrn445JwotKpdEnoVLokdCpdEp5IwpuKNUqxRinWKBd/nMo3qTyh0iWhU+mS8ESxRinWKMUa5eLLkvBNSThROVE5SUKn0qmcJKFT6ZLwpmKNUqxRijXKxctUfknliSR0Kp3KSRJOVE5UuiQ8UaxRijVKsUYxH6wxijVKsU...

```

Below is the code in the template node

```auto
<div>
    <img src="{{msg.payload}}" alt="QR Code">
</div>

```

Why?

---

<div class="post-metadata">

**Author:** ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)\
**Post date:** [28 September 2024 00:41 UTC](https://discourse.nodered.org/t/base64-image-is-not-working-on-dashboard-2-0/91318/2 "2024-09-28T00:41:34Z")

</div>

you have to use the explicit base64 call in src (below my is working for me in DB2) ..just replace mymoon with whatever you have 😉

```auto
<img height="70px" :title="mymoon_phase" :src="`data:image/jpg;base64,${mymoon}`"
```

---

<div class="post-metadata">

**Author:** ![iotkismec](https://avatars.discourse-cdn.com/v4/letter/i/3be4f8/32.png) [@iotkismec](https://discourse.nodered.org/u/iotkismec)\
**Post date:** [28 September 2024 01:11 UTC](https://discourse.nodered.org/t/base64-image-is-not-working-on-dashboard-2-0/91318/3 "2024-09-28T01:11:50Z")

</div>

do you mean like this? still not working for me

```auto
<template>
  <div>
    <h1>Base64 Image Example</h1>
    <img
      height="70px"
      :title="imageTitle"
      :src="imageSrc"
      alt="My Base64 Image"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageTitle: 'Your Image Title',
      imageSrc: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB0CAYAAABUmhYnAAAAAklEQVR4AewaftIAAALPSURBVO3BQa7jSAwFwUxC97/yGy+5KkCQ7OlPMMJ8sMYo1ijFGqVYoxRrlGKNUqxRijVKsUYp1ijFGqVYoxRrlGKNUqxRijXKxUMqv5SEO1S6JNyh8ktJeKJYoxRrlGKNcvGyJLxJ5USlS8IdKl0STpLwJpU3FWuUYo1SrFEuvkzljiTckYSTJHQqXRKeULkjCd9UrFGKNUqxRrkYRuUkCZMVa5RijVKsUS7+OJWTJHQqJ0n4y4o1SrFGKdYoF1+WhG9KQqdyRxKeSMK/pFijFGuUYo1y8TKVX1LpktCpdEnoVLoknKj8y4o1SrFGKdYo5oNBVE6SMFmxRinWKMUa5eIhlS4JnUqXhE6lS0Kn0iXhJAmdyolKl4Q7VLoknKh0SXhTsUYp1ijFGsV88EUqTyShU+mScKJykoROpUtCp9Il4Q6VkyQ8UaxRijVKsUa5eEilS8JJEu5QOVH5JpU7VP5PxRqlWKMUaxTzwQ+p3JGEE5VvSkKncpKEE5UuCW8q1ijFGqVYo5gPHlDpktCpdEnoVLokdCpdEk5U7khCp3JHEjqVLgmdykkSnijWKMUapVijmA/+MJUuCW9S6ZJwotIl4USlS8ITxRqlWKMUa5SLh1R+KQldEjqVLgknKl0SuiScqNyh8k3FGqVYoxRrlIuXJeFNKnckoVPpktAl4USlS0KXhCeS8KZijVKsUYo1ysWXqdyRhDtUnlDpknCHykkSTlS6JDxRrFGKNUqxRrn445JwotKpdEnoVLokdCpdEp5IwpuKNUqxRinWKBd/nMo3qTyh0iWhU+mS8ESxRinWKMUa5eLLkvBNSThROVE5SUKn0qmcJKFT6ZLwpmKNUqxRijXKxctUfknliSR0Kp3KSRJOVE5UuiQ8UaxRijVKsUYxH6wxijVKsU...'
    };
  }
};
</script>

```

---

<div class="post-metadata">

**Author:** ![iotkismec](https://avatars.discourse-cdn.com/v4/letter/i/3be4f8/32.png) [@iotkismec](https://discourse.nodered.org/u/iotkismec)\
**Post date:** [28 September 2024 02:45 UTC](https://discourse.nodered.org/t/base64-image-is-not-working-on-dashboard-2-0/91318/4 "2024-09-28T02:45:00Z")

</div>

I tried like this also did not work

```auto
<template>
    <div>
        <div>
            <img src ="{{count}}">
            <p style="color: red">Last Payload: {{ count }}</p>
            
        </div>
        
        
        

    </div>

</template>

<script>
    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)
            return {
                count: 0,
                
            }
        },
        watch: {
            // watch for any changes of "count"
            msg: function () {
                if (this.msg.topic === 'counter') {
                    this.count = this.msg.payload
                }
            }
        },
        
    }
</script>

```

the result just like this

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/c/5c394a168f839170352f6f3099b7e3764acbefa8.png)

---

<div class="post-metadata">

**Author:** ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)\
**Post date:** [28 September 2024 05:15 UTC](https://discourse.nodered.org/t/base64-image-is-not-working-on-dashboard-2-0/91318/5 "2024-09-28T05:15:42Z")

</div>

In my example

1. I do load the picture into _ **msg.payload.astro.moon\_link** _ .. and do the base64 convert  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/d/2db1f12ec8e1d5a21eae5982e7be9e261d1e51de.png)
2. transfer _ **msg.payload.astro.moon\_link** _ to this.mymoon  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/1/316fa716b5f03f9d05379dc0e6914bea1473207e.png)
3. display the icon in my vcard template

```auto
    <v-card class="mx-0" width="100%" color="black">
        <template v-slot:append>
            <img height="70px" :title="mymoon_phase" :src="`data:image/jpg;base64,${mymoon}`" @click="expand = !expand"/>
        </template>
    </v-card>
```

---

<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:** [28 September 2024 06:17 UTC](https://discourse.nodered.org/t/base64-image-is-not-working-on-dashboard-2-0/91318/6 "2024-09-28T06:17:27Z")

</div>

The syntax in Dashboard 2 is slightly different. When binding attributes, you use the following syntax:

```auto
:src="myVariable"

```

You can see it in the documentation [here](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#working-with-variables).

---

<div class="post-metadata">

**Author:** ![iotkismec](https://avatars.discourse-cdn.com/v4/letter/i/3be4f8/32.png) [@iotkismec](https://discourse.nodered.org/u/iotkismec)\
**Post date:** [1 October 2024 01:59 UTC](https://discourse.nodered.org/t/base64-image-is-not-working-on-dashboard-2-0/91318/7 "2024-10-01T01:59:33Z")

</div>

thanks. got it already.

---

<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:** [15 October 2024 01:59 UTC](https://discourse.nodered.org/t/base64-image-is-not-working-on-dashboard-2-0/91318/8 "2024-10-15T01:59:46Z")

</div>

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