Displaying an image on UIBuilder page from Node-red dashboard

General
6

Right, I've just tested my code and it works. Using the default template code and just changing the logo image. I created 3 192x192 px images based on the default blue logo image - blue, green and red.

index.html

<b-img v-if="myimg.url !== ''" :src="myimg.url" rounded left v-bind="imgProps" :alt="myimg.alt" class="mt-1 mr-2"></b-img>

index.js

var app1 = new Vue({
    el: '#app',
    data: {

        myimg: {url:'', alt:''},

    ...

        uibuilder.onChange('msg', function(msg){
            //console.info('[indexjs:uibuilder.onChange] msg received from Node-RED server:', msg)
            vueApp.msgRecvd = msg

            if (msg.topic === 'img') {
                vueApp.myimg = msg.payload
            }
        })

...

Then I created 3 injects with the following format:

image
image1539×649 32.4 KB

Activating each inject, changes the image dynamically.

1 Like