OK, so this works:
[{"id":"fc01834c.7727e","type":"inject","z":"857b334d.2d91a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":190,"y":640,"wires":[["69f88c9e.ccd584"]]},{"id":"69f88c9e.ccd584","type":"function","z":"857b334d.2d91a","name":"","func":"const data = \"data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAACPQABbjzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP8AAAAAjzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD///////Xw7f/18O3/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA//Xw7f/18O3/9fDt//Xw7f+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD////////////18O3/o2pG/6NqRv/18O3/jzcA/483AP///////////483AP+PNwD/jzcA/483AP+PNwD//////7+YgP+PNwD/jzcA/483AP+PNwD/////////////////jzcA//Xw7f+PNwD/jzcA/483AP/18O3//////483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP/18O3//v7////////w5+H/o2pG/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP/18O3//////483AP+PNwD//////483AP+PNwD/jzcA//Xw7f/18O3/9fDt//Xw7f/18O3/9fDt/7+YgP+PNwD/o2pG/483AP+PNwD/jzcA//////+jakb/jzcA//////+jakb/o2pG/6NqRv+jakb/o2pG/6NqRv//////jzcA/483AP+PNwD/jzcA/483AP+PNwD//v7/////////////jzcA/483AP+PNwD/jzcA/483AP+PNwD/9fDt/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD//////6NqRv+jakb/o2pG/6NqRv+jakb/o2pG//////+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP/18O3/9fDt//Xw7f/18O3/9fDt//Xw7f+/mID/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP8AAAAAjzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PNwD/jzcA/483AP+PQABbgAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAEAAA==\"\nmsg.payload = data\nreturn msg","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":350,"y":640,"wires":[["eb95241.bca25d8"]]},{"id":"2cf3f051.3dd33","type":"debug","z":"857b334d.2d91a","name":"simple-debug","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":740,"y":620,"wires":[]},{"id":"eb95241.bca25d8","type":"uibuilder","z":"857b334d.2d91a","name":"Simple Example","topic":"","url":"data_image","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"showfolder":false,"useSecurity":false,"sessionLength":"","tokenAutoExtend":false,"oldUrl":"uib_simple","x":530,"y":640,"wires":[["2cf3f051.3dd33"],["4e7c2860.c5c318"]]},{"id":"4e7c2860.c5c318","type":"debug","z":"857b334d.2d91a","name":"uib controls","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":730,"y":660,"wires":[]}]
html
<!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">
<title>uibuilder simple example</title>
<meta name="description" content="Node-RED uibuilder - Simple example using VueJS">
<link rel="icon" href="./images/node-blue.ico">
<!-- Put your own custom styles in here -->
<link rel="stylesheet" href="./index.css" media="all">
</head><body>
<!-- The "app" element is where the code for dynamic updates is attached -->
<div id="app">
<h1>Demo of dynamic loading of data image</h1>
<p>
The elements below are dynamically updated when you send
a msg to your uibuilder node.
</p>
<div v-if="msg.payload">
<img :src="imgData" />
</div>
<h2>The full msg object</h2>
<code>{{ msg }}</code>
</div>
<!-- Vendor Libraries - Load in the right order -->
<script src="../uibuilder/vendor/socket.io/socket.io.js"></script>
<script src="../uibuilder/vendor/vue/dist/vue.min.js"></script>
<!-- REQUIRED: Sets up Socket listeners, the uibuilder and msg objects -->
<script src="./uibuilderfe.min.js"></script>
<!-- Put your own custom code in here -->
<script src="./index.js"></script>
</body></html>
JS
/* jshint browser: true, esversion: 5, asi: true */
/*globals uibuilder, Vue */
'use strict'
//const { default: Vue } = require( 'vue/types/umd' )
/** @see https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Front-End-Library---available-properties-and-methods */
// @ts-ignore
var app1 = new Vue({
// The HTML element to attach to
el: '#app',
/** Pre-defined data
* Anything defined here can be used in the HTML
* if you update it, the HTML will automatically update
*/
data: {
msg: '[Nothing Recieved Yet]',
imgData: '',
},
// Called after the Vue app has been created. A good place to put startup code
created: function() {
// **REQUIRED** Start uibuilder comms with Node-RED
// @ts-ignore
uibuilder.start()
},
// Called when Vue is fully loaded
mounted: function() {
// Keep a convenient reference to the Vue app
var vueApp = this
/** Triggered when the node on the Node-RED server
* recieves a (non-control) msg
*/
// @ts-ignore
uibuilder.onChange('msg', function(msg) {
// @ts-ignore
vueApp.msg = msg
vueApp.imgData = msg.payload
})
// Send message back to node-red
// uibuilder.send({payload:'some message'})
},
}) // --- End of the Vue app definition --- //
// EOF
I've inserted the data image using a function node and created the data using an online tool. You can see how simple it is. 1 line of html and 5 lines of js in total.
And here is an updated flow (use the same html/js) that reads the image from a file and uses the base64 node to convert it then uses a change node to add the required "data:image/x-icon;base64," on the beginning (which you could do in the front end as originally described of course).
[{"id":"2cf3f051.3dd33","type":"debug","z":"857b334d.2d91a","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":795,"y":500,"wires":[],"l":false},{"id":"eb95241.bca25d8","type":"uibuilder","z":"857b334d.2d91a","name":"Simple Example","topic":"","url":"data_image","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"showfolder":false,"useSecurity":false,"sessionLength":"","tokenAutoExtend":false,"oldUrl":"uib_simple","x":650,"y":520,"wires":[["2cf3f051.3dd33"],["4e7c2860.c5c318"]]},{"id":"4e7c2860.c5c318","type":"debug","z":"857b334d.2d91a","name":"uib controls","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":795,"y":540,"wires":[],"l":false},{"id":"b3e74383.55a2c","type":"base64","z":"857b334d.2d91a","name":"","action":"","property":"payload","x":240,"y":520,"wires":[["231b7bab.66ef94"]]},{"id":"731e2b3f.79e3a4","type":"file in","z":"857b334d.2d91a","name":"","filename":"C:\\src\\nr2\\data\\uibuilder\\common\\images\\node-blue.ico","format":"","chunk":false,"sendError":false,"encoding":"none","x":135,"y":520,"wires":[["b3e74383.55a2c"]],"l":false},{"id":"c0c4f8b2.1fb358","type":"inject","z":"857b334d.2d91a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":75,"y":520,"wires":[["731e2b3f.79e3a4"]],"l":false},{"id":"231b7bab.66ef94","type":"change","z":"857b334d.2d91a","name":"","rules":[{"t":"change","p":"payload","pt":"msg","from":"^(.*)$","fromt":"re","to":"data:image/x-icon;base64,$1","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":440,"y":520,"wires":[["eb95241.bca25d8"]]}]
