# Add picture in header dashboard 2.0

**URL:** <https://discourse.nodered.org/t/add-picture-in-header-dashboard-2-0/92872>\
**Category:** General\
**Tags:** dashboard-2\
**Created:** [2 November 2024 19:18 UTC](https://discourse.nodered.org/t/add-picture-in-header-dashboard-2-0/92872 "2024-11-02T19:18:53Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![CarlosSousa](https://avatars.discourse-cdn.com/v4/letter/c/f14d63/32.png) [@CarlosSousa](https://discourse.nodered.org/u/CarlosSousa)\
**Post date:** [2 November 2024 19:18 UTC](https://discourse.nodered.org/t/add-picture-in-header-dashboard-2-0/92872/1 "2024-11-02T19:18:53Z")

</div>

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

```auto
<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>

```

---

<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 November 2024 20:24 UTC](https://discourse.nodered.org/t/add-picture-in-header-dashboard-2-0/92872/2 "2024-11-02T20:24:38Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![CarlosSousa](https://avatars.discourse-cdn.com/v4/letter/c/f14d63/32.png) [@CarlosSousa](https://discourse.nodered.org/u/CarlosSousa)\
**Post date:** [3 November 2024 10:27 UTC](https://discourse.nodered.org/t/add-picture-in-header-dashboard-2-0/92872/3 "2024-11-03T10:27:54Z")

</div>

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

---

<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 November 2024 11:12 UTC](https://discourse.nodered.org/t/add-picture-in-header-dashboard-2-0/92872/4 "2024-11-03T11:12:26Z")

</div>

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](https://dashboard-demos.flowfuse.cloud/dashboard/template)

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.

---

<div class="post-metadata">

**Author:** ![CarlosSousa](https://avatars.discourse-cdn.com/v4/letter/c/f14d63/32.png) [@CarlosSousa](https://discourse.nodered.org/u/CarlosSousa)\
**Post date:** [3 November 2024 23:34 UTC](https://discourse.nodered.org/t/add-picture-in-header-dashboard-2-0/92872/5 "2024-11-03T23:34:00Z")

</div>

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

```auto
<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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/d/5df4ee83549317b8f8185900b18744b86db5d209.png)

---

<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 November 2024 23:34 UTC](https://discourse.nodered.org/t/add-picture-in-header-dashboard-2-0/92872/6 "2024-11-17T23:34:20Z")

</div>

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