UI template image via msg.payload

#1

Set up a UI TEMPLATE NODE.
Want to display an image
Method 1:
<img ng-src=''http://192.168.3.11/picture/snapshot.jpg" height="470" width="280" />

This works fine.

Method 2:
using a function to set the
msg.payload = 'http://192.168.3.11/picture/snapshot.jpg";
return msg;

Then in the UI Template passed in the msg.payload.

But the image does not show.

Any ideas?

[RESOLVED] Grab picture from Internet, resize and display on Dashboard
#2

this works!

#3

Do you mean you have solved your problem?

#4

it worked.

#5

The goal is to display a picture from a http as a payload and display on the Dashboard with a UI Template :
i try this :

This is mine :

msg.payload = 'https://pngimage.net/wp-content/uploads/2018/06/power-on-png-6.png';
return msg;

Then i paste : <img src= "msg.payload" /> in the UI Template like this : image

but nothing display : image

i missed something ?! @sweetwater

#6

i found the solution : in the UI Template paste this : :smiley:

<p> Status:
<img width="30" height="30" src=  {{msg.payload}} alt='Image not found'  />
</p>

image

And go further :

add in the function node : msg.title = 'Working good !' ;
and in the UI Template : title={{msg.title}}

title
display a message when the mouse is over

[RESOLVED] Grab picture from Internet, resize and display on Dashboard