# UIbuilder - dynamically changing images

**URL:** <https://discourse.nodered.org/t/uibuilder-dynamically-changing-images/28169>\
**Category:** General\
**Created:** [11 June 2020 11:03 UTC](https://discourse.nodered.org/t/uibuilder-dynamically-changing-images/28169 "2020-06-11T11:03:18Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![tarsel](https://avatars.discourse-cdn.com/v4/letter/t/c0e974/32.png) [@tarsel](https://discourse.nodered.org/u/tarsel)\
**Post date:** [11 June 2020 11:03 UTC](https://discourse.nodered.org/t/uibuilder-dynamically-changing-images/28169/1 "2020-06-11T11:03:18Z")

</div>

Hi all

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.

Any help is appreciated.

Ray

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 June 2020 11:05 UTC](https://discourse.nodered.org/t/uibuilder-dynamically-changing-images/28169/2 "2020-06-11T11:05:06Z")

</div>

What lib are you using?

jQuery? Vue?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [11 June 2020 11:25 UTC](https://discourse.nodered.org/t/uibuilder-dynamically-changing-images/28169/3 "2020-06-11T11:25:57Z")

</div>

If you are using the default VueJS, attributes are changed like this:

```auto
<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.

---

<div class="post-metadata">

**Author:** ![tarsel](https://avatars.discourse-cdn.com/v4/letter/t/c0e974/32.png) [@tarsel](https://discourse.nodered.org/u/tarsel)\
**Post date:** [11 June 2020 12:16 UTC](https://discourse.nodered.org/t/uibuilder-dynamically-changing-images/28169/4 "2020-06-11T12:16:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [11 June 2020 12:20 UTC](https://discourse.nodered.org/t/uibuilder-dynamically-changing-images/28169/5 "2020-06-11T12:20:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [25 June 2020 12:20 UTC](https://discourse.nodered.org/t/uibuilder-dynamically-changing-images/28169/6 "2020-06-25T12:20:42Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.