Saludos podrías hacer algo así:
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);
<img src="" alt="TEMPERATURA" id="imagen_temperatura" width="100" heigth="100">
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!