Add picture in header dashboard 2.0

General
1

Hello everybody,
I am trying to put some picture in the header (app-bar-title) but not sucess.
I am using that bellow code, but after deploying the page not open.
In the src: i try to put many way like bellow but not working

  • E://logo.png
  • E:/logo.png
  • E:\logo.png

CODE

<template>
    <Teleport v-if="mounted" to="#app-bar-title">
        <img height="5px" :src="E://logo.png"></img>
        <legend>Informações do Usuário</legend>
    </Teleport>
</template>
<script>
    export default {
        data() {
            return {
                mounted: false
            }
        },
        mounted() {
            this.mounted = true
        }
    }
</script>
2

You cannot just display files from your file system. You either need to load it using a file node and send it as base64 or serve it using http-in/http-response nodes OR serve it using httpStatic (edit you settings.js file)

I am afk so cannot provide a demo for dashboard 2 but if you search httpStatic there are hundreds of threads and solutions.

3

Hi Steve
Thanks for the answer.
More late i am going to try and give you feedback.

4

I've added a demo to the online dashboard 2.0 live demos showing a few ways you can serve an image to the dashboard without having to modify your node-red settings.js. Scroll down the section named "images" here: Node-RED Dashboard 2.0

If you plan on adding lots of images, I would recommend setting up httpStatic is settings.js on your Node-RED installation, so that it simplifies serving files to your dashboard.

NOTE: you will need to combine what I have demonstrated with the Teleport for this image to be displayed in the header.

5

Hi Steve
Is working fine. Thanks for your great support. I have spend at few hours trying in diferent ways and with your help i made it in few minutes.

I have used that code in template. And i inject in msg.payload the picture converted in base 64

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

image
image363×186 4.6 KB