Image display with template

[mirianaB]

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:

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

And then to a template node:

<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

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

[Steve-Mcl]

@mirianaB

<img src="{{ msg.payload }}">

Try

<img :src="msg.payload">

[joepavitt]

Just to provide our documentation for this too: Template ui-template | Node-RED Dashboard 2.0

[mirianaB]

It works !! Thank you