Dashboard 2. Custom Logo in Title Bar

Dashboard
1

Hi,

I try to add a Custom logo in the Title bar (Header) (left side).

I use a template node with the following contents:

<template>
    <Teleport v-if="mounted" to="#app-bar-title">
        <img height="32px" :src="msg.payload"></img>
    </Teleport>
</template>
<script>
    export default {
        data() {
            return {
                mounted: false
            }
        },
        mounted() {
            this.mounted = true
        }
    }
</script>

This code has been found at: Template ui-template | Node-RED Dashboard 2.0

I inject an image of the size 32 x 32 pixels. The payload is send as a single Buffer Object to the template node.

The icon image is not shown in the Header, but the icon of an image is shown.
What could be wrong?

Regards

2

Alas I can't understand what you are saying here. Maybe a screen capture would clarify?

A bit of searching tells me the HTML syntax to embed a base64 encoded image is this

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
  //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

And when msg.payload contains data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==, the :src="msg.payload" syntax does put a red dot in the dashboard title bar for me.

What does your msg.payload contain?