Is there a simple way to get a file path (anywhere on the device that hosts the node red install) and display that image on the dashboard? I gotten it to work via this method but I was wondering if there was a more simple way to do it, espically since I want to eventually display an rtsp feed on the dashboard (still working it out but ffmpeg seems the most relaible)
Have you tried the live demos on the docs site?
There was also a similar request just discussed that could be of interest. The example flow expects the image data as buffer
I found the following code which did not show anything, I'm not sure if that's the right one?
<template>
<Teleport v-if="mounted" to="#app-bar-title">
<img height="32px" :src="msg.payload"></img>
</Teleport>
</template>
<script>
export default {
data() {
return {
mounted: false
}
},
mounted() {
this.mounted = true
}
}
</script>
If that button was a snake i'd be stuffed. Apologies for my inability to see something in plain sight
Spot the difference...
PS, use forward quotes like c:/blah/blah
Lastly, if Node-RED is not running under the SmolPC account, it wont have access to your desktop. Always better to put shared resources in a shared (non user) directory. In fact, better still, put the images in a directory called images inside the .node-red folder then just use images/my-image.jpg
I'm running Node-RED on a Raspberry Pi so I just quickly tried. I did put a simple image (meter.jpg) in the .node-red directory. It worked as expected. Please be sure that the file node outputs a single buffer
1 Like
ahh ok, thats how you did that, Once i had the image in that folder (i had to change the file path for windows) I had no issues displaying it as I could use the filename in the img src tag, I was just wondering if there was a way to display an image without needing to save it there first. The reson I say this is if I use ffmpeg to pull a frame (or video) off a rtsp camera I can display it right away without needing to save (as such).
Doing this will also help with an upcoming project, I am going to render an animation from blender which will have a few thousand frames (possibly) and I want a way to see what was the last frame rendered and frame count (read from file name), the thing is that the image won't be store on a device that has Node red (aka a Nas) and I will need to perodically check the nas folder
Of course it is, that is what my example shows with the MQTT node. Myself I send image data from all my surveillance cameras over my network as buffers via MQTT
To add frame counter and to store the last frame is also pretty simple to add in Node-RED. Just count the number of received messages with image data, store and then update/overwrite to the latest image data. This is of course only valid for images being sent to Node-RED. If you handle this elsewhere you have to handle this in that environment
Im not sure why but that seems to now work, It may have been that I didn't inject the image properly or something. Is there a way to get rid of the text and just have the image?
In template node, just comment out one line
<template>
<div>
<!-- Image src: {{ info || 'none' }} -->
<v-img
v-if="msg.payload"
:width="msg.width || 150"
aspect-ratio="msg.aspec || 16/9"
cover
:src="msg.payload"
></v-img>
</div>
</template>
1 Like
Thanks for the help, that does exactly what I want. I will mark a solution soon
For anyone finding this thread, This is the answer that worked with me
I found you only need the following code in the template node to work:
Thanks to @krambriw for being super helpful for this one
1 Like
