Saludos podrías hacer algo así:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    var ruta_diaSoleado = "https://previews.123rf.com/images/grkistock/grkistock1401/grkistock140100112/25272390-d%C3%ADa-soleado-en-la-pradera-ilustraci%C3%B3n-del-vector-.jpg";
    var ruta_diaLluvia ="https://previews.123rf.com/images/mccjeff/mccjeff1711/mccjeff171100047/89866275-triste-d%C3%ADa-lluvioso.jpg";
    var ruta_diaNublado = "http://www.clubcientificobezmiliana.org/blog/wp-content/uploads/2012/02/IMG_13400.jpg";
    var temperatura = 10;
    var temperatura2 = 20;
    imagen = document.getElementById('imagen_temperatura');
    if(temperatura == 10){
     imagen.setAttribute('src',ruta_diaSoleado);
    }
    var delayInMilliseconds = 2000; //retraso de 2 segundos
    setTimeout(function() {
      if(temperatura2==20){
      imagen.setAttribute('src',ruta_diaLluvia);
      }
    }, delayInMilliseconds);




<!-- language: lang-html -->

    <img src="" alt="TEMPERATURA" id="imagen_temperatura" width="100" heigth="100">

<!-- end snippet -->

Si te fijas tengo declarado previamente las rutas de las imágenes a usar para los distintos climas o tiempos, mediante un if valido la temperatura en este caso es algo básico pero deberías validar si entre en cierto rango de temperatura muestras la ruta de una image u otra, para ello uso setAttribute que reemplaza o establece ese atributo a la imagen mediante JavaScript, espero te sirva.

También he usado un setTimeout que establece o define un retraso para que se pueda notar el cambio en las imágenes eso es opcional en tu lógica, suerte!

[Documentacion setAttribute JavaScript][1]


  [1]: https://www.w3schools.com/jsref/met_element_setattribute.asp