Base64 image is not working on dashboard 2.0

Dashboard
1

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

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

Below is the code in the template node

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

Why?

2

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

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

do you mean like this? still not working for me

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

I tried like this also did not work

<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
image1386×587 91 KB

5

In my example

  1. I do load the picture into msg.payload.astro.moon_link .. and do the base64 convert
    image
  2. transfer msg.payload.astro.moon_link to this.mymoon
    image
    image861×71 2.95 KB
  3. display the icon in my vcard template
    <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>
6

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

:src="myVariable"

You can see it in the documentation here.

7

thanks. got it already.

8

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