时间戳

首页 > 解决方案 > Node-Red Dashboard - 显示来自 Dropbox 的图像

node.js - Node-Red Dashboard - 显示来自 Dropbox 的图像

问题描述

我的 Node-Red 在 IBM Cloud 上运行时遇到了一个非常烦人的问题。我正在尝试在我的 Node-Red 仪表板上显示来自 Dropbox 的图像。但是，图像根本没有加载。我看到图像被下载并且可以在调试节点上看到它。但是，我找不到任何方法将其作为小部件显示在仪表板上。

我的流量：

[{"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"}]

我找不到任何可行的解决方案。您的帮助将不胜感激！

标签： node.jsibm-clouddropboxnode-red

解决方案

似乎唯一的解决方案是将图像嵌入到 div 中。为此，请获取图像的共享链接并将 URL 的最后一部分更改为 raw=1。小细节要牢记！:)

推荐阅读