# Displaying an image in dashboard from a Url

**URL:** <https://discourse.nodered.org/t/displaying-an-image-in-dashboard-from-a-url/27912>\
**Category:** Dashboard\
**Created:** [6 June 2020 18:44 UTC](https://discourse.nodered.org/t/displaying-an-image-in-dashboard-from-a-url/27912 "2020-06-06T18:44:46Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![evanic14](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/evanic14/32/23480_2.png) [@evanic14](https://discourse.nodered.org/u/evanic14)\
**Post date:** [6 June 2020 18:44 UTC](https://discourse.nodered.org/t/displaying-an-image-in-dashboard-from-a-url/27912/1 "2020-06-06T18:44:46Z")

</div>

Hi,

I have a problem.  
I'm using the node-red-contrib-buienradar library. This is basically an API that sends weather data. I would like to diplay an icon in my dashboard that came from that API message. But I can't get the URL converted to an image.

I hope you van help me.  
emiel

---

<div class="post-metadata">

**Author:** ![stefan24](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/stefan24/32/23075_2.png) [@stefan24](https://discourse.nodered.org/u/stefan24)\
**Post date:** [6 June 2020 20:59 UTC](https://discourse.nodered.org/t/displaying-an-image-in-dashboard-from-a-url/27912/2 "2020-06-06T20:59:05Z")

</div>

> [@evanic14](#):
>
> node-red-contrib-buienradar

They send as

> output a **msg.payload.buienradar** object which holds all the data

Do you mean

> **icoonactueel** - an URL to the current weather icon

Please give me an example of the URL, they generate.

---

<div class="post-metadata">

**Author:** ![evanic14](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/evanic14/32/23480_2.png) [@evanic14](https://discourse.nodered.org/u/evanic14)\
**Post date:** [7 June 2020 09:54 UTC](https://discourse.nodered.org/t/displaying-an-image-in-dashboard-from-a-url/27912/3 "2020-06-07T09:54:44Z")

</div>

Hi stefan,

Thanks for the quick response.

 ![VirtualBox_MV output message](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/0/20c90c7f07af1e3d4f960d8d29f17afc88b4d061.png)

This is what my code looks like. In the debug screen you can see the URL that needs to be converted to a image. I've tried to show the image in my dashboard by sending it to a text functionbock, but this only shows the URL and not the image, but I already thought this would happen.

I also installed another library which is called: node-red-contrib-image-simple-node. This library can convert the URL to a image, but I can't send it to my dashboard.

I hope this is enough information for you.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [7 June 2020 09:58 UTC](https://discourse.nodered.org/t/displaying-an-image-in-dashboard-from-a-url/27912/4 "2020-06-07T09:58:31Z")

</div>

use a ui\_template node.

```auto
<p>
<img src="{{msg.payload.buienradar.icoonactueel}}" />
</p>

```

The icon will be displayed.

---

<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:** [7 June 2020 10:15 UTC](https://discourse.nodered.org/t/displaying-an-image-in-dashboard-from-a-url/27912/5 "2020-06-07T10:15:53Z")

</div>

> [@evanic14](#):
>
> I also installed another library which is called: node-red-contrib-image-simple-node. This library can convert the URL to a image, but I can't send it to my dashboard.

If you use `node-red-contrib-image-tools` it can grab an image from internet, convert to base64 & then you simply inject that into a ui\_template

![3n0vvlpEGJ](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/2/322b5fda210da3504c1d839a1edbf7e16e791d47.gif)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/e/4e028aa6b0e159e0f384f8af198aa871296a44a7.png)

```auto
[{"id":"39d92325.5b31ec","type":"jimp-image","z":"da4f1a2d.d31008","name":"Kitten from placekitten.com","data":"http://placekitten.com/300/300","dataType":"str","ret":"b64","parameter1":"","parameter1Type":"msg","parameter2":"","parameter2Type":"msg","parameter3":"","parameter3Type":"msg","parameter4":"","parameter4Type":"msg","parameter5":"","parameter5Type":"msg","parameter6":"","parameter6Type":"msg","parameter7":"","parameter7Type":"msg","parameter8":"","parameter8Type":"msg","parameterCount":0,"jimpFunction":"none","selectedJimpFunction":{"name":"none","fn":"none","description":"Just loads the image.","parameters":[]},"x":260,"y":120,"wires":[["2d9d272a.787cb8","a5ecda5c.164c28","7f9bc166.833c3"]]},{"id":"2d9d272a.787cb8","type":"image viewer","z":"da4f1a2d.d31008","name":"","width":"200","data":"payload","dataType":"msg","x":510,"y":140,"wires":[[]]},{"id":"4ce2fac6.848174","type":"ui_button","z":"da4f1a2d.d31008","name":"","group":"7de23636.088a88","order":1,"width":0,"height":0,"passthru":false,"label":"Get Image from internet","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":220,"y":60,"wires":[["39d92325.5b31ec"]]},{"id":"a5ecda5c.164c28","type":"debug","z":"da4f1a2d.d31008","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":480,"y":60,"wires":[]},{"id":"d615e8d1.844438","type":"ui_template","z":"da4f1a2d.d31008","group":"7de23636.088a88","name":"ui template","order":1,"width":"6","height":"5","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":690,"y":100,"wires":[[]]},{"id":"7f9bc166.833c3","type":"template","z":"da4f1a2d.d31008","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img width=\"160px\" height=\"160px\" src=\"{{{payload}}}\">","output":"str","x":520,"y":100,"wires":[["d615e8d1.844438"]]},{"id":"7de23636.088a88","type":"ui_group","z":"","name":"Default","tab":"59c1a803.3cb648","order":1,"disp":true,"width":"6","collapse":false},{"id":"59c1a803.3cb648","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![evanic14](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/evanic14/32/23480_2.png) [@evanic14](https://discourse.nodered.org/u/evanic14)\
**Post date:** [7 June 2020 10:15 UTC](https://discourse.nodered.org/t/displaying-an-image-in-dashboard-from-a-url/27912/6 "2020-06-07T10:15:53Z")

</div>

![VirtualBox_MV template 2.0](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/9/09b34fa80422503e8d750e173794df6650462aa5.png)  
This is what i've typed.

But I don't have a image yet.

 ![VirtualBox_MV ui](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/2/0248f76ebf3f25beaa54743f0e751dba9e1a2b5b.png)

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [7 June 2020 10:16 UTC](https://discourse.nodered.org/t/displaying-an-image-in-dashboard-from-a-url/27912/7 "2020-06-07T10:16:39Z")

</div>

Did you apply the template node to the correct tab/group ?

Works for me

![Screenshot 2020-06-07 at 12.16.48](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/b/4b0123c2f294a1ba6941d10bc9353d42a48eb62b.jpeg)

---

<div class="post-metadata">

**Author:** ![evanic14](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/evanic14/32/23480_2.png) [@evanic14](https://discourse.nodered.org/u/evanic14)\
**Post date:** [7 June 2020 10:16 UTC](https://discourse.nodered.org/t/displaying-an-image-in-dashboard-from-a-url/27912/8 "2020-06-07T10:16:47Z")

</div>

(its supposed to be diplayed right below the temperature chart)

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [7 June 2020 10:17 UTC](https://discourse.nodered.org/t/displaying-an-image-in-dashboard-from-a-url/27912/9 "2020-06-07T10:17:52Z")

</div>

Hold on: read my post with the code again, i changed it in the mean time, single quotes don't work, change it to double quotes.

---

<div class="post-metadata">

**Author:** ![evanic14](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/evanic14/32/23480_2.png) [@evanic14](https://discourse.nodered.org/u/evanic14)\
**Post date:** [7 June 2020 10:20 UTC](https://discourse.nodered.org/t/displaying-an-image-in-dashboard-from-a-url/27912/10 "2020-06-07T10:20:48Z")

</div>

I used double quotes this time and i think i have selected teh right tab.

 ![VirtualBox_MV tab](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/e/fe64fc94c59b8c7479e1e193fbc3a7cee27be2c7.png)  
This is what the template block looks like.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [7 June 2020 10:22 UTC](https://discourse.nodered.org/t/displaying-an-image-in-dashboard-from-a-url/27912/11 "2020-06-07T10:22:50Z")

</div>

You need to inject again before it gets updated right.

But if it is still not working, on your dashboard, right click near the location the icon should appear \> inspect element and find the template with the img tag, also check the network/console tab if there are errors related to the image.

also double quotes on the end of the string ? (as we cant see that)

---

<div class="post-metadata">

**Author:** ![evanic14](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/evanic14/32/23480_2.png) [@evanic14](https://discourse.nodered.org/u/evanic14)\
**Post date:** [7 June 2020 10:26 UTC](https://discourse.nodered.org/t/displaying-an-image-in-dashboard-from-a-url/27912/12 "2020-06-07T10:26:16Z")

</div>

yes, I used double quotes on the end aswell. But i don't know how I can inject the url again.

---

<div class="post-metadata">

**Author:** ![evanic14](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/evanic14/32/23480_2.png) [@evanic14](https://discourse.nodered.org/u/evanic14)\
**Post date:** [7 June 2020 12:44 UTC](https://discourse.nodered.org/t/displaying-an-image-in-dashboard-from-a-url/27912/13 "2020-06-07T12:44:26Z")

</div>

I finaly figured it out.  
This is the setup for all of the function blocks.

 ![VirtualBox_MV line ip](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/9/298e8ed1634aad6ecb6e01d6787f33480aeb41af.png)

This is the code in the orange block, this block determines the size of the image.

 ![VirtualBox_MV size](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/4/043ff01ce7ea579e1475fe643a951fa096501a39.png)

(part 1)

---

<div class="post-metadata">

**Author:** ![evanic14](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/evanic14/32/23480_2.png) [@evanic14](https://discourse.nodered.org/u/evanic14)\
**Post date:** [7 June 2020 12:44 UTC](https://discourse.nodered.org/t/displaying-an-image-in-dashboard-from-a-url/27912/14 "2020-06-07T12:44:58Z")

</div>

This is the code in the blue block, this is the code that converts the URL to a image.

 ![VirtualBox_MV display image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/0/90a497d92f286317d2edc8faa761e7e688d4e7df.png)

And this is how it looks like in my dashboard.

 ![VirtualBox_MV ui 2.0](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/f/9f894a39184b4182a9a4f5e1cba805deae884ae2.png)

So thanks to all the people that have helped me and I hope that this explanation can help others.

(part 2)

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [7 June 2020 13:07 UTC](https://discourse.nodered.org/t/displaying-an-image-in-dashboard-from-a-url/27912/15 "2020-06-07T13:07:43Z")

</div>

Complexity for no reason, you can use the template node directly and can supply the size as well.

---

<div class="post-metadata">

**Author:** ![evanic14](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/evanic14/32/23480_2.png) [@evanic14](https://discourse.nodered.org/u/evanic14)\
**Post date:** [7 June 2020 14:18 UTC](https://discourse.nodered.org/t/displaying-an-image-in-dashboard-from-a-url/27912/16 "2020-06-07T14:18:43Z")

</div>

well, in my case it isn't unnecessary because the image would've been a bit too big.  
But yeah, it isn't necessary if you only want to see the image.

---

<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:** [21 June 2020 14:18 UTC](https://discourse.nodered.org/t/displaying-an-image-in-dashboard-from-a-url/27912/17 "2020-06-21T14:18:55Z")

</div>

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