I'm having a very annoying problem with my Node-Red running on IBM Cloud. I'm trying to show an image from Dropbox on my Node-Red dashboard. However, the image is not loading at all. I see that the image gets downloaded and can see it on debug node. However, I couldn't find any way to show it on dashboard as a widget.
My flow:
[{"id":"a3e43112.21c75","type":"dropbox","z":"8943788e.15f4e8","dropbox":"","filename":"home/pi/Pictures/recog/top_recog_temp.jpeg","name":"","x":350,"y":3340,"wires":[["ffc2533f.771cc"]]},{"id":"213a2eb6.80e722","type":"inject","z":"8943788e.15f4e8","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"x":100,"y":3340,"wires":[["a3e43112.21c75"]]},{"id":"e27103b.f8bec","type":"debug","z":"8943788e.15f4e8","name":"","active":true,"console":"false","complete":"true","x":1050,"y":3340,"wires":[]},{"id":"ffc2533f.771cc","type":"base64","z":"8943788e.15f4e8","name":"","action":"","property":"payload","x":620,"y":3340,"wires":[["1b05eeaf.0c9051"]]},{"id":"1b05eeaf.0c9051","type":"template","z":"8943788e.15f4e8","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img width=\"320px\" height=\"240px\" src=\"data:image/jpeg;base64,{{{msg.payload}}}\">","output":"str","x":770,"y":3340,"wires":[["689d541d.99553c"]]},{"id":"689d541d.99553c","type":"ui_template","z":"8943788e.15f4e8","group":"a88a98c0.9666b8","name":"","order":0,"width":0,"height":0,"format":"<div ng-bind-html=\"msg.payload\"><img width=\"320px\" height=\"240px\" src=\"data:image/jpeg,base64;{{{payload}}}\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":900,"y":3340,"wires":[["e27103b.f8bec"]]},{"id":"a88a98c0.9666b8","type":"ui_group","z":"","name":"Image","tab":"a831db53.d7b128","order":5,"disp":true,"width":"6"},{"id":"a831db53.d7b128","type":"ui_tab","z":"","name":"3D Moving Device","icon":"dashboard"}]
I couldn't find any working solution to this. Your help would be very appreciated!
It seems the only solution is embedding the image into a div. To do this, get a share link for the image and change the last part of the URL to raw=1. Small detail to keep in mind! :)