# Image display with template

**URL:** <https://discourse.nodered.org/t/image-display-with-template/89958>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [2 August 2024 16:21 UTC](https://discourse.nodered.org/t/image-display-with-template/89958 "2024-08-02T16:21:21Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mirianaB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mirianab/32/93330_2.png) [@mirianaB](https://discourse.nodered.org/u/mirianaB)\
**Post date:** [2 August 2024 16:21 UTC](https://discourse.nodered.org/t/image-display-with-template/89958/1 "2024-08-02T16:21:21Z")

</div>

Hi everyone, I'm new to nodered and it seems like I can't display an image using the template node on the dashboard2. From a http GET i get in responce a json, containing a Base64 code of an image that i need to display on the dashboard, like {"bs4\_img": "/9j/4AAQSkZJRgABAQ..."}.

So i transfer it to a function which does:

```auto
msg.payload = 'data:image/jpeg;base64,' + msg.payload.bs4_img;
return msg;

```

And then to a template node:

```auto
<div class="image-container">
    <img src="{{ msg.payload }}">
</div>

```

This doesn't show the image.  
I tried displaying the {{ msg.payload }} as text and it shows it all (so the msg doesn't get cut or something). I tried makng a template node with

```auto
<div>
    <img src="data:image/jpeg;base64,/9j/4AA..."> 
</div>

```

and it corectly shows the image.

I don't know what to do. Is there a way to do this?

---

<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 August 2024 16:24 UTC](https://discourse.nodered.org/t/image-display-with-template/89958/2 "2024-08-02T16:24:49Z")

</div>

> [@mirianaB](#):
>
> ` <img src="{{ msg.payload }}">`

Try

```auto
<img :src="msg.payload">

```

---

<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:** [2 August 2024 17:17 UTC](https://discourse.nodered.org/t/image-display-with-template/89958/3 "2024-08-02T17:17:12Z")

</div>

Just to provide our documentation for this too: [Template ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#working-with-variables)

---

<div class="post-metadata">

**Author:** ![mirianaB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mirianab/32/93330_2.png) [@mirianaB](https://discourse.nodered.org/u/mirianaB)\
**Post date:** [3 August 2024 08:40 UTC](https://discourse.nodered.org/t/image-display-with-template/89958/4 "2024-08-03T08:40:18Z")

</div>

It works !! Thank you

---

<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 August 2024 08:41 UTC](https://discourse.nodered.org/t/image-display-with-template/89958/5 "2024-08-17T08:41:00Z")

</div>

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