Node-Red图片显示

1.控件下载

在Node-Red中需要先下载所需要的控件：

首先在左上角点击设置，并找到节点管理；
在节点管理中点击安装；
在安装界面的查询窗口输入node-red-dashboard控件，查询后选择下载，等待下载完成；

下载的控件中重点使用的节点名为 template 节点

使用方式就是在节点中编写HTML等语句。

2.节点 read file

实现图片的显示还需要一个默认已经安装的节点 read file ，将保存在目录下的图片进行格式转化，可传递成 template 可使用的变量。
在这里插入图片描述

3.图片显示

显示图片的代码仅需要三个节点：
在这里插入图片描述
1.选择一张图片保存至电脑目录下；
2.复制图片目录及图片名，例如 “D:\node-redPicture\可莉.jpeg”；（文件名为绝对路径）
3.在 read file 节点中，选择编码为 base64

4.在 template 中编写代码输出图片；

<img src="data:image/jpeg;base64,{
   
   {msg.payload}}">

5.结果显示
在这里插入图片描述

4.延伸-每3秒切换一张图片

在这里用比较简单的方法来实现，主要用到 inject、delay、read file、template 四个节点，在inject节点中设置为6秒，delay节点中设置为延迟3秒，再分别承接read file 节点选择要显示的图片，并将变量传给template。
在这里插入图片描述

5.延伸-UI界面手动切换图片

1.在手动切换图片前，我们先来看一下read file 节点中的图片目录是在哪个变量里吧，查看的方式就在第3步的图片显示程序的read file 节点后接一个 debug 节点，并设置为 “与调试输出相同” ，然后在右侧栏的调试串口查看read file 节点的输出信息。
输出内容有payload、topic、filename三个变量，其中payload输出内容是图片的base64码，topic没做定义输出为空，filename输出则为文件的目录名。
在这里插入图片描述
2.使用filename传递图片目录
这里为了便于查看代码，借助与function节点进行程序的编写。

在使用function编写时需注意对 “ \ ” 的转义。

msg.filename = "D:\\node-redPicture\\可莉.jpeg";
return msg;

若node-red版本为V3.x.x时，需要进行在read file节点中设置如下：
在这里插入图片描述

3.UI界面切换图片
最后使用switch 节点，状态为开时显示一张图片，状态为关时切换图片。
在这里插入图片描述

在function中进行状态判断，并输出图片目录。

if(msg.payload == true)
{
    
    
    msg.filename = "D:\\node-redPicture\\可莉.jpeg";
}
if(msg.payload == false)
{
    
    
    msg.filename = "D:\\node-redPicture\\纳西坦.jpeg";
}
return msg;

部署后即可在 127.0.0.1:1880/ui 界面中点击switch节点进行图片切换。