Node-RED中怎样在HTML中显示图片文件

最新推荐文章于 2024-01-02 08:47:21 发布
最新推荐文章于 2024-01-02 08:47:21 发布
阅读量1.5k 收藏 4
点赞数
分类专栏： 前端那些骚操作 文章标签： nodered
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/124212922
版权

场景

Node-RED中建立静态网页和动态网页内容：

Node-RED中建立静态网页和动态网页内容_霸道流氓气质的博客-CSDN博客

上面使用html文字内容实构造Web网站，在HTML网页中显示照片。

注：

博客：
霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、设计流程

2、第一个流程/image路由使用read file节点读取和显示文件

编辑read file节点

3、编辑http response节点，响应头为image/png

4、部署之后，访问

http://127.0.0.1:1880/image

5、第二个流程主要编辑template节点中HTML中建立访问图片的img标签，src属性就是对应上面第一个流程的

/image路由

<html>
    <head>
        <title>显示图片</title>
    </head>
    <body>
        <h1>霸道的程序猿</h1>
        <img src="/image" height="200" weight="200"/>
    </body>
</html>

6、部署后访问

http://127.0.0.1:1880/show

7、流程json数据

[
    {
        "id": "f4a4d8eab7935bc8",
        "type": "tab",
        "label": "流程 3",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "c428312d1f6165d1",
        "type": "mqtt-broker",
        "name": "mqtt",
        "broker": "127.0.0.1",
        "port": "1883",
        "clientid": "",
        "autoConnect": true,
        "usetls": false,
        "protocolVersion": "4",
        "keepalive": "60",
        "cleansession": true,
        "birthTopic": "",
        "birthQos": "0",
        "birthPayload": "",
        "birthMsg": {},
        "closeTopic": "",
        "closeQos": "0",
        "closePayload": "",
        "closeMsg": {},
        "willTopic": "",
        "willQos": "0",
        "willPayload": "",
        "willMsg": {},
        "sessionExpiry": ""
    },
    {
        "id": "51eee50b4ec9422f",
        "type": "ui_group",
        "name": "dashboardDemo",
        "tab": "29ae4c620f43ee0d",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "29ae4c620f43ee0d",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    },
    {
        "id": "a506c767a5c1edbd",
        "type": "ui_base",
        "theme": {
            "name": "theme-light",
            "lightTheme": {
                "default": "#0094CE",
                "baseColor": "#0094CE",
                "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
                "edited": true,
                "reset": false
            },
            "darkTheme": {
                "default": "#097479",
                "baseColor": "#097479",
                "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
                "edited": false
            },
            "customTheme": {
                "name": "Untitled Theme 1",
                "default": "#4B7930",
                "baseColor": "#4B7930",
                "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"
            },
            "themeState": {
                "base-color": {
                    "default": "#0094CE",
                    "value": "#0094CE",
                    "edited": false
                },
                "page-titlebar-backgroundColor": {
                    "value": "#0094CE",
                    "edited": false
                },
                "page-backgroundColor": {
                    "value": "#fafafa",
                    "edited": false
                },
                "page-sidebar-backgroundColor": {
                    "value": "#ffffff",
                    "edited": false
                },
                "group-textColor": {
                    "value": "#1bbfff",
                    "edited": false
                },
                "group-borderColor": {
                    "value": "#ffffff",
                    "edited": false
                },
                "group-backgroundColor": {
                    "value": "#ffffff",
                    "edited": false
                },
                "widget-textColor": {
                    "value": "#111111",
                    "edited": false
                },
                "widget-backgroundColor": {
                    "value": "#0094ce",
                    "edited": false
                },
                "widget-borderColor": {
                    "value": "#ffffff",
                    "edited": false
                },
                "base-font": {
                    "value": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"
                }
            },
            "angularTheme": {
                "primary": "indigo",
                "accents": "blue",
                "warn": "red",
                "background": "grey",
                "palette": "light"
            }
        },
        "site": {
            "name": "Node-RED Dashboard",
            "hideToolbar": "false",
            "allowSwipe": "false",
            "lockMenu": "false",
            "allowTempTheme": "true",
            "dateFormat": "DD/MM/YYYY",
            "sizes": {
                "sx": 48,
                "sy": 48,
                "gx": 6,
                "gy": 6,
                "cx": 6,
                "cy": 6,
                "px": 0,
                "py": 0
            }
        }
    },
    {
        "id": "248cbbb0.18e794",
        "type": "ui_group",
        "name": "MyGroup",
        "tab": "3f79c420.cfc1bc",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "3f79c420.cfc1bc",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    },
    {
        "id": "a0954be5.a7f7e8",
        "type": "ui_group",
        "name": "MyInput",
        "tab": "3f79c420.cfc1bc",
        "order": 2,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "508bd6f8398ab80f",
        "type": "ui_group",
        "name": "OpenWeatherMap",
        "tab": "3f79c420.cfc1bc",
        "order": 3,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "8824dea1.83e31",
        "type": "websocket-client",
        "path": "ws://localhost:9898/",
        "tls": "",
        "wholemsg": "false"
    },
    {
        "id": "31b22689.e7deda",
        "type": "http in",
        "z": "f4a4d8eab7935bc8",
        "name": "",
        "url": "/image",
        "method": "get",
        "upload": false,
        "swaggerDoc": "",
        "x": 310,
        "y": 160,
        "wires": [
            [
                "b2b11d4c.15923"
            ]
        ]
    },
    {
        "id": "4003fe7.4ff1b",
        "type": "http response",
        "z": "f4a4d8eab7935bc8",
        "name": "响应图片",
        "statusCode": "",
        "headers": {
            "Content-type": "image/png"
        },
        "x": 680,
        "y": 160,
        "wires": []
    },
    {
        "id": "b2b11d4c.15923",
        "type": "file in",
        "z": "f4a4d8eab7935bc8",
        "name": "",
        "filename": "D:\\badao.png",
        "format": "",
        "chunk": false,
        "sendError": false,
        "encoding": "none",
        "allProps": false,
        "x": 500,
        "y": 160,
        "wires": [
            [
                "4003fe7.4ff1b"
            ]
        ]
    },
    {
        "id": "37277f7.5a9618",
        "type": "http in",
        "z": "f4a4d8eab7935bc8",
        "name": "",
        "url": "/show",
        "method": "get",
        "upload": false,
        "swaggerDoc": "",
        "x": 300,
        "y": 220,
        "wires": [
            [
                "dc3ceb63.2bfd08"
            ]
        ]
    },
    {
        "id": "f9cb5a4a.9ced48",
        "type": "http response",
        "z": "f4a4d8eab7935bc8",
        "name": "",
        "statusCode": "",
        "headers": {},
        "x": 610,
        "y": 220,
        "wires": []
    },
    {
        "id": "dc3ceb63.2bfd08",
        "type": "template",
        "z": "f4a4d8eab7935bc8",
        "name": "显示图片",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<html>\n    <head>\n        <title>显示图片</title>\n    </head>\n    <body>\n        <h1>霸道的程序猿</h1>\n        <img src=\"/image\" height=\"200\" weight=\"200\"/>\n    </body>\n</html>",
        "output": "str",
        "x": 460,
        "y": 220,
        "wires": [
            [
                "f9cb5a4a.9ced48"
            ]
        ]
    }
]

霸道流氓气质
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Node-RedUI界面显示温湿度光照
10-04
将Node-Red收到的Hex数据（1个字节）转化为10进制数据。
Node-RED中使用JSON数据建立web网站
BADAO_LIUMANG_QIZHI的博客
04-16 1536
场景 Node-RED中建立静态网页和动态网页内容： Node-RED中建立静态网页和动态网页内容_霸道流氓气质的博客-CSDN博客 在上面的基础上，怎样根据json数据快速搭建起来显示数据的网站页面。 注： 博客：霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、设计布局如下 2、编辑change节点 数据源json如下 {"name":"霸道的程序猿","age"
Node-Red图片显示
weixin_43195420的博客
08-18 4798
使用node-red在UI界面中显示图片
Node-RED中使用json节点解析JSON数据
BADAO_LIUMANG_QIZHI的博客
04-15 5475
场景 Node-RED简介与Windows上安装、启动和运行示例： Node-RED简介与Windows上安装、启动和运行示例_霸道流氓气质的博客-CSDN博客 Node-RED怎样导出导入流程为json文件： Node-RED怎样导出导入流程为json文件_霸道流氓气质的博客-CSDN博客 json示例数据如下 [{"title": "ASP.NET網頁程式設計", "author": "陳會安", "category": "Web", "pubdate": "06/2015", "id":
Node-Red学习-解析JSON数据
最新发布
shihui2003的博客
01-02 755
2、拖拽编辑Text组件，输入数据格式{{msg.payload[0].id}}Node-Red学习-解析JSON数据。
node-red-contrib-os:Node-Red节点，用于获取cpu系统信息
05-30
在 Node-RED 安装的根目录中运行以下命令 npm install node-red-contrib-os 节点 操作系统 使用该节点查询操作系统。 返回操作系统的主机名。 返回操作系统名称。 例如，Linux 上的“Linux”、OS X 上的“Darwin...
node-red-contrib-persist:重新启动持久化节点Red上的数据的Node Red节点重新启动
05-12
通过文件系统的非易失性存储基本思想是将消息的内容存储到非易失性存储中，以后可以取回（例如，在Node-RED重新启动或部署过程之后）。 这些消息首先存储在内部缓冲区中，直到写入文件系统为止。 对文件系统的此...
multi-tenant-node-red-manager:Web App，用于管理多租户节点-RED实例
05-24
多租户节点-RED管理应用程序 一个小型Web应用程序，用于... "mongodb": "mongodb://docker-pi.local/nodered", "rootDomain": "example.com", "dockerodeSettings": { "host": "http://127.0.0.1", "port": 237
node-red-contrib-require:需要第三方模块的红色节点
05-05
在您的节点红色用户目录（通常为〜/ .node-red）中，运行： npm install 然后，您可以只使用需要它的模块名称。 2.对于本地模块 您可以使用文件路径来要求该模块，例如./my-module/index.js 。 注意：该模块...
red-dashboard-svg-control:通过UI模板节点可在Node-RED仪表板中控制SVG元素
05-12
要在Node-RED仪表板的模板中使用可控制的SVG组件，请遵循以下说明。 如果有问题，请留在“。 SVG 在第三方软件中创建SVG图像。 我使用了 （不确定是否有免费版本）。 如果使用Boxy SVG，请单击底部的“元素”选项...
Nodejs 识别图片类型的方法
10-16
主要介绍了Nodejs 识别图片类型的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
node-html-light：用于NodeJSHTML解析器提供轻量级的面向对象的界面
02-09
节点HTML灯 用于NodeJSHTML Parser提供轻量级的面向对象的界面 如何安装？ npm i node - html - light -- save 谁在使用它？ 使用node-html-light在服务器端呈现整个页面。 使您能够为关注者提供丰富的内容，安排鸣叫和线程，并将很快添加基于AI的功能。 如何使用？ 文件 类方法 静态fromPath （路径）-> 静态fromString （字符串）-> 实例属性 名称 父母 属性 实例方法 html （）-> 头（）-> body （）-> toHtml （）->字符串 节点 类方法 静态fromPath （路径）->| Array <> 静态fromString （字符串）->| Array <> （对象|名称，属性）->|的静态值Array <> 实例属性 名称 父母 属性 实例方法 appendChild （ne
node-red-contrib-ui-contextmenu:一个Node-RED节点，用于在Node-RED仪表板中显示弹出上下文菜单
05-29
node-red-contrib-ui-contextmenu 一个Node-RED节点，用于在Node-RED仪表板中显示弹出上下文菜单 特别感谢，我在这个节点的犯罪伙伴！ 安装 在您的 Node-RED 用户目录（通常是 ~/.node-red）中运行以下 npm 命令： npm install node-red-contrib-ui-contextmenu :warning: 警告： 建议使用Dashboard 版本 2.19.4 或更高版本，以确保上下文菜单在部署或刷新后不会自动出现。 上下文菜单仅在其仪表板组（请参阅配置屏幕）当前可见时才会出现！ 这在与其他节点结合使用时很重要：例如，SVG 节点和 ContextMenu 节点始终需要在同一个仪表板组中，否则上下文菜单将永远不会出现！ 来自SVG 节点 2.xx的输出消息包含一个重大更改，这将导致上下文菜单不再出现！ 有关指南，
html form表单提交数据并后台获取
weixin_30566063的博客
02-28 3031
前台： HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) <html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>无标题页</...
Node-red dashboard中使用 template node显示本地图片
o__o__o__o的博客
04-01 4960
最近在使用Node-Red，需要在Node-red的仪表盘dashboard中使用 template node在ui上显示本地图片。
HTML--表单控件-表单提交数据
万物皆有灵
08-14 301
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单控
html中如何获取表单的数据
热门推荐
StuTan
05-27 2万+
使用表单中的id属性获取表单中的数据 在表单的input标签中指定id属性值，在script脚本中可以通过 “表格的名称.id名称.value”来访问表单中的值，例如：register_form.username.value 表单代码： <form name = "register_form" action="" method="post"> 昵称:<input type="text" name="username" maxlength="20" id="username
Node-RED学习笔记——HTML 文件
Yucen的博客
08-20 1480
Node节点的.html 文件定义了节点与编辑器的显示格式。它包含三个不同的部分，每个部分都包装在它自己的标记.html <script>中。 节点定义：向编辑器注册的主节点定义，定义调色板类别、可编辑属性和要使用的图标等。它在常规 javascript 脚本标记中defaults 编辑对话框data-template-name：定义节点编辑对话框内容的编辑模板。type="text/html" data-template-name="node-type" 帮助文本..
前端项目实战（bootstrap+json-server）搭建网站及后台管理-2login页面
qq_43352505的博客
03-21 662
本项目的从登录注册的页面开始，这个页面也是包括项目中的大部分技术点（样式布局，获取表单数据，服务器请求，数据比对，数据增加）
创建自定义 node-red ui
11-25
创建自定义Node-RED UI可以通过以下步骤来完成。 首先，我们需要在Node-RED的工作目录下创建一个新的文件夹，用于存放自定义UI的代码文件。然后，我们在该文件夹内创建一个HTML文件，用于定义UI的布局和样式。 在HTML文件中，我们可以使用HTML、CSS和JavaScript来定义UI的外观和行为。可以使用HTML元素来创建各种UI组件，如按钮、文本框、下拉菜单等。使用CSS样式可以对UI组件进行美化和布局。使用JavaScript可以添加交互功能，如点击事件和数据处理。 接下来，我们可以使用Node-RED的Template节点将自定义UI的HTML代码插入到流程中。在Template节点的配置中，我们可以选择要将UI代码插入到哪个位置，如该节点前后、输入、输出等。在插入位置之后的节点中，我们可以使用一些内置的全局对象（如msg、flow、global）来与自定义UI进行通信。 在自定义UI中，我们可以通过JavaScript代码监听用户的操作，如按钮点击事件。我们可以在事件处理程序中使用Node-RED的内置函数（如send、status、warn、error）来向流程发送消息、更改节点状态或生成警告和错误信息。 最后，我们需要在Node-RED的设置文件中启用自定义UI。打开settings.js文件，在其中搜索ui配置项，并将其值设置为true。然后重启Node-RED。 在浏览器中打开Node-RED的地址，可以看到自定义UI已成功集成到Node-RED中。通过与自定义UI的交互，我们可以获取用户的输入、执行相关的流程操作，并将结果反馈给用户。 通过以上步骤，我们可以创建一个属于自己的定制化Node-RED UI，以满足特定的需求和设计要求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霸道流氓气质

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值