I am creating a simple device dashboard using UIbuilder as this allows me to serve a very basic html page. (I have a more complex page built using node-red dashboard.) Within UIbuilder I have dynamically updated fields and I can change the background colour, but I am struggling on how to change an <img src=> tag to a different image and get it updated. I need a small picture to change based on values within node-red without refreshing the webpage.
Is this possible? I have been looking for a solution for a while and my attempts using inserted elements are not working.
If you are using the default VueJS, attributes are changed like this:
<img :src="someVarNameOrJSfn" ...>
That can be a simple JavaScript expression but normally would simply be a variable name that is pre-defined in the vueApp.data section of your index.js file. You then update that as needed.
Thanks both for your fast replies. I am using Vue.js but still learning how it all slots together. My issue was that I was trying to reference the variable name in all places in the web page using {{image_name}}. I did not understand that this is only required when the variable is to be content, and that I could reference a Vue variable just using image_name.
Certainly worth spending an hour going through the Vue basics as you will find everything slots into place really quickly.
I moved the default from jQuery to VueJS because it is actually slightly smaller but also because it is a lot easier and more logical when you are building UI's. Vue is a lot easier to get to grips with than many of the frameworks (like REACT or Angular) but really just as powerful. Addin bootstrap-vue is icing on the cake since that takes care of loads of CSS that you would otherwise need to worry about and adds some really handy high-level components on top of Vue such as the table handling, cards, and so on. So with minimal boilerplate, you get a really nice UI with minimal code.
