node red switch node not working to switch images

Question

my flow get data from a json file. Then the function node will return a number that is corresponding to the img in switch node. For example, if the icon is rain, than return msg.payload =1 , then in the switch node if msg.payload =1 then should switch it to the rain icon. But instead what i get is all of the icon come out at once. My function node is working as I check the debug node, it is returning the correct value.

Function node

if (msg.payload.current_observation.icon === "rain") {
  var  test = 1 ;
msg.payload = test;
return msg;
} 

else if (msg.payload.current_observation.icon === "clear") {
  var  test = 2 ;
msg.payload = test;
return msg;
} 

else if (msg.payload.current_observation.icon === "cloudy") {
  var  test = 3 ;
msg.payload = test;
return msg;
} 

Answer 1

You need to use a single template node with something like this:

<div ng-if="msg.payload === 1">
  <img src="https://i.imgur.com/Ycv4ZSv.png">
</div>
<div ng-if="msg.payload === 2">
  <img src="https://i.imgur.com/0IOLemr.png">
</div>
<div ng-if="msg.payload === 3">
  <img src="https://i.imgur.com/CcTjBES.png">
</div>

You can remove the switch node and link the function node directly to the template node.